Home > Article > Web Front-end > Passing parameters to js files (detailed explanation)_javascript skills

Passing parameters to js files (detailed explanation)_javascript skills

WBOYOriginal: 2016-05-16 16:42:071533browse

1. Use global variables

This is the simplest way, such as Google Adsense:

Copy code The code is as follows:

4ec11beb6c39d0703d1751d203c17053 google_ad_client ='pub-3741595817388494'; 2cacc6d41bbb37262a98f745aa00fbf0 3af896bf38fa26b1c3d2d831281b92932cacc6d41bbb37262a98f745aa00fbf0

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> // 注意：上面的代码是根据实际应用虚拟的示范代码

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>

2. Obtain and parse the src of the script element

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

13ae44ffe4aa4df7af013a12fb8158d82cacc6d41bbb37262a98f745aa00fbf0

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:

94c14f1ae29f3592bfda9eb585dbd14b2cacc6d41bbb37262a98f745aa00fbf0

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>

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:

ae47fa971796540d6040c77d18703721 TB.SomeApp.scriptArgs ='a=b&c=d'; 2cacc6d41bbb37262a98f745aa00fbf0

In the test.js file:

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

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

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

ae47fa971796540d6040c77d18703721a=b&c=d2cacc6d41bbb37262a98f745aa00fbf0

In js file:

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

Imagination is endless, you can also use onload:

3959d0a17b69883088dd6228aa01b50a2cacc6d41bbb37262a98f745aa00fbf0

Just define the function in the js file:

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

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'));
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery1.8 Method to determine whether an element is bound to an event_jqueryNext article：JQuery1.8 Method to determine whether an element is bound to an event_jquery

See more

Passing parameters to js files (detailed explanation)_javascript skills

Related articles