Passing parameters to js files (detailed explanation)_javascript skills-JS Tutorial-php.cn

Passing parameters to js files (detailed explanation)_javascript skills

WBOY

Release： 2016-05-16 16:42:07

Original

1601 people have browsed it

1. Use global variables

This is the simplest way, such as Google Adsense:

Copy code The code is as follows:

The disadvantage is that global variables are introduced. There are two variants of how to introduce files:

// 变体1：用document.write输出
 <script type="text/javascript"> google_ga_id ='g6u7un8646xx'; 
document.write(unescape('%3Cscript type="text/javascript" src= "http://www.google-analytics.com/ga.js"%3E%3C/script%3E')); </script> 
// 变体2：用DOM操作append到head里 
<script type="text/javascript"> 
G_BEACON_ATP ='category=&userid=&channel=112ad_id=';
 document.getElementsByTagName('head')[0].appendChild(document. createElement('script')).src='http://taobao.com/atp.js'; 
</script> // 注意：上面的代码是根据实际应用虚拟的示范代码

Copy after login

Note: Variant 1 has many applications. Common writing methods are as follows:

<script type="text/javascript"> 
// 直接转义即可： 
document.write('<script type="text/javascript" src="test.js"></script>'); 
// 或者像Yahoo!首页一样： 
document.write('<scr'+'ipt type="text/javascript" src="test.js"></scr'+'ipt>');
</script>

Copy after login

2. Obtain and parse the src of the script element

Compared with all variables, we prefer to pass in parameters like the following:

The core problem is how to obtain the src attribute.

Method one is to add the id attribute to the script, get the current script through the id, and then use regular expressions to extract the parameters from src. The disadvantage is that in the HTML 4.01 Specification, the SCRIPT element does not have an id attribute. This shortcoming is not a shortcoming. After all, it is better to believe in standards than to have no standards.

Method 2 is to use the js file name as a hook. After passing document.getElementsByTagName('script') in the js code, the current js file is matched by the regular expression. This method is very orthodox, but requires a unique file name. The disadvantage is that there is a lot of code, it is not refined, and it has a slight impact on performance.

Method three is based on method one, simply add a custom attribute data:

In the test.js file, get the incoming parameters through the following line:

var scriptArgs = document.getElementById('testScript').getAttribute('data'); The fourth method is to use the sequential execution mechanism of js (the js file can be loaded synchronously or asynchronously, but when executed, it must be in accordance with executed sequentially in the document flow). When a js file is executed, it must be the last one among the "loaded" js files:

var scripts = document.getElementsByTagName('script'); var currentScript = scripts[scripts.length - 1];Method 4 is more clever and genius than method 2.

In terms of code simplification and performance, method three > method one > method four > method two

Summary: If you care about standards, I recommend method four; if like me, you don’t feel the need to fully comply with standards, I recommend method three.

Write a test program

<!DOCTYPE html>
<html>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
<script src="a2.js">
</script>
</html>

Copy after login

a2.js

var scripts = document.getElementsByTagName('script'); var currentScript = scripts.length;alert(currentScript);

Print out separately

1 2 3

3. Inspiration Plan

If you are a loyal fan of John Resig like me, you may still remember the hotly discussed "Degrading Script Tags" in August last year. John Resig opened a door of imagination for us. For the problem of this article, we can also use the following "evil ways" to achieve it:

In the test.js file:

TB = {}; TB.SomeApp = {}; 
var scripts = document.getElementsByTagName("script");
eval(scripts[ scripts.length - 1 ].innerHTML);

Copy after login

In this way, the parameters are stored in the TB.SomeApp.scriptArgs variable.

When there are not many parameters, you can even do this:

In js file:

var scripts = document.getElementsByTagName("script"); 
var scriptArgs = scripts[ scripts.length - 1 ].innerHTML.replace(/[s]/g, '');

Copy after login

Imagination is endless, you can also use onload:

Just define the function in the js file:

TB = {}; 
TB.SomeFun = function(arg) { 
//code
};

Copy after login

The above code can run correctly in non-IE browsers. For stupid IE, you need to add a few lines of code:

if(window.ActiveXObject) { 
var scripts = document.getElementsByTagName('script'); 
eval(scripts[scripts.length - 1].getAttribute('onload'));
}

Copy after login