Pass parameter of to the js file

  • 2020-03-30 03:31:53
  • OfStack

Use global variables

This is the easiest way, like Google Adsense:


<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 the introduction of global variables. There are also two variations on the way files are introduced:


//Variant 1: output with 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> 
//Variant 2: DOM manipulation of append to 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 code above is a virtual demonstration based on the actual application

Note: variant 1 is widely used. It is commonly written as follows:


<script type="text/javascript"> 
//Direct escape:
document.write('<script type="text/javascript" src="test.js"></script>'); 
//Or like Yahoo! Home page like:
document.write('<scr'+'ipt type="text/javascript" src="test.js"></scr'+'ipt>');
</script>

Get and parse the SRC of script elements

< The script type = "text/javascript" SRC = "test. Js & # 63; A = b&c = d "> < / script>

The core problem is how to get the SRC attribute.

Method one is to add an id attribute to the script, get the current script through the id, and then use the regularization to extract parameters from SRC. The drawback is that in the HTML 4.01 Specification, SCRIPT elements have no id attribute. This defect is not a defect, after all, as good as no standard.

Method 2 is to use js file name as a hook, js code through the document. The getElementsByTagName (after 'script'), regular matches the current js file. This is quite orthodox, but requires a unique file name. The downside is that there is a lot of code, no refining, and a slight impact on performance.

Method 3 is on the basis of method 1, simply add a custom attribute data:

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

In the test.js file, get the parameters passed by the following line:

Var scriptArgs = document. GetElementById (' testScript). The getAttribute (' data '); Method 4 is to use the js sequential execution mechanism (js files can be loaded synchronously or asynchronously, but must be executed in the order in the document stream). When a js file is executed, it must be the last one in the "loaded" js file:

Var scripts = document. GetElementsByTagName (' script '); Var currentScript = scripts[scripts.length - 1]; Method four is more clever than method two.

In terms of code simplification and performance, method 3 > Methods a > Methods four > Method 2

Summary: if you are concerned about standards, recommended method four; If, like me, you don't feel the need to fully comply with the standards, method 3 is recommended.

Wrote a test program


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

A2. Js

Var scripts = document. GetElementsByTagName (' script '); Var currentScript = scripts. Length; Alert (currentScript);

Print out   separately;

1 2 3

Three, inspiration scheme

If you are a big fan of John Resig, like me, you may remember the much-discussed dirty Script Tags from last August. John Resig opens the door to imagination and, for the purposes of this article, the following "evil ways" can be used:

< The script type = "text/javascript" SRC = "test. Js >" TB. SomeApp. ScriptArgs = 'a = b&c = d; < / script>

In the test.js file:


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

This stores the parameter in the tb.someapp.scriptargs variable.

When there are few parameters, it can even be as follows:

< The script type = "text/javascript" SRC = "test. Js >" A = b&c = d< / script>

Js file:


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

The imagination is endless, you can also use onload:

< Script type = "text/javascript" SRC = "test. Js" onload = "TB. SomeFun (' a = b&c = d)" > < / script>

Js file to define a good function:


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

The above code works correctly in non-ie browsers. There are a few more lines of code for clumsy ie:


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

Related articles: