How to pass parameters to JavaScript files in JavaScript

Yipin Sky Web Development Code Station ASP and other classic code collection blogs related to Web development - ASP communication QQ group 12814238 (full) 14725152 (open) Home page ASPJS/AJAX reconstruction and optimization comprehensive code database collection and sharing audio-visual entertainment operating system Previous article | Next An article JS/AJAX
How to pass parameters to JavaScript files in JavaScript Author: Yipin Date: 2009-03-23
Font size: small, medium,

large

program code
<script type="text/javascript">
google_ad_client = 'pub-3741595817388494';
</script>
<script type="text/javascript" src=" http://pagead2 .
googlesyndication.com/pagead/show_ads.js"></script>

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

program code
// Variant 1: Use document.write to output
<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>

program code
// Variation 2: Use DOM operation to append to the 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>

Note: The above code is a virtual demonstration code based on actual application

. Note: Variant 1 is used in many applications. Common writing methods are as follows:

program code
<script type="text/javascript">
// Just escape directly:
document.write('<script type="text/javascript" src="test.js"></script>');
// Or like the Yahoo! homepage:
document.write('<scr' + 'ipt type="text/javascript" src="test.js"></scr' + 'ipt>');
</script>

2.

Compared with obtaining and parsing the src of the script element and all variables, we prefer to pass in parameters as follows:

program code
<script type="text/javascript" src="test.js?a=b&c=d"></script>

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.

The second method 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 regular rules. 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 to simply add a custom attribute data based on method one:

program code
<script id="testScript" type="text/javascript" src="test.js" data="a=b&c=d"></script>

In the test.js file, the parameters passed in are obtained through the following line:

program code
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 executed in the order in the document flow). When a js file is executed, it must be the last one among the "loaded" js files:

program code
var scripts = document.getElementsByTagName('script');
var currentScript = scripts[scripts.length - 1];

Method four is more dexterous and genius than method two.

In terms of code simplification and performance, Method 3>Method 1>Method 4>Method 2

Summary: If you care about standards, I recommend method 4; if like me you feel that it is not necessary to fully comply with the standards, method 3 is recommended.

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

program code
<script type="text/javascript" src="test.js">
TB.SomeApp.scriptArgs = 'a=b&c=d';
</script>

In the test.js file:

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

This stores the parameters in the TB.SomeApp.scriptArgs variable.

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

program code
<script type="text/javascript" src="test.js">a=b&c=d</script>

js file:

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

The imagination is endless, you can also use onload:

program code
<script type="text/javascript" src="test.js" xxxxx="TB.SomeFun('a=b&c=d')"></script>

Just define the function in the js file:

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

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

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

As long as we continue to carry forward the spirit of excavation, I believe there will be more inspirational solutions -.-

After summarizing the above solutions, which solution is the best? My answer is: There is no best, only the most suitable! Because for different applications and different concepts, the definition of "good" is different.

For example, my current philosophy is that it is not necessary to fully comply with the standards. As for global variables, what we need to avoid is abuse, not use. Therefore, I will choose the global variable solution, which is the simplest and has the best performance.