如何在html和JS中包含Javascript JS檔案終極解決方案

關鍵字: javascript import, javascript include

現在常用的一種javascript的方法是在當前的html文檔中插入一個script標籤，在標籤中引入script指令碼

 

Js代碼

1. var __includes__ = new Array;    
2. Array.prototype.indexOf = function(obj){ for(var i = 0; i < this.length; i++){if (this[i] == obj)return i;}return -1;}  
3.         Array.prototype.add = function(obj){this[this.length] = obj;}  
4. function include_js(js)  
5. {  
6.     if (__includes__.indexOf(js) > -1)return;  
7.     __includes__.add(js);  
8.     var head = document.getElementsByTagName('head')[0];      
9.     script = document.createElement('script');  
10.     script.src = js;  
11.     script.type = 'text/javascript';  
12.     head.appendChild(script);  
13. }  

var __includes__ = new Array;  Array.prototype.indexOf = function(obj){ for(var i = 0; i < this.length; i++){if (this[i] == obj)return i;}return -1;}Array.prototype.add = function(obj){this[this.length] = obj;}function include_js(js){if (__includes__.indexOf(js) > -1)return;__includes__.add(js);var head = document.getElementsByTagName('head')[0];script = document.createElement('script');script.src = js;script.type = 'text/javascript';head.appendChild(script);}

 

當你只是在你的htmlw文檔中使用這個方法的時候，一切OK，這其實是script的標籤的一種快捷的寫法而已。

但是，如果你在一個javascript使用這個方法，問題就來了，比如

我在test.js中使用include_js("test1.js"),在test1.js中有一個變數test1是在test.js中要使用
的，在webkit中盡然出現了test1變數未定義的錯誤，我不知道ie和firefox是否有這種問題，我想可能是include_js本身不是同步
執行導致的，所以我只好使用以下方法來完善inlcude_js

 

 

 

Js代碼

1. var __includes__ = new Array;    
2. Array.prototype.indexOf = function(obj){ for(var i = 0; i < this.length; i++){if (this[i] == obj)return i;}return -1;}  
3.         Array.prototype.add = function(obj){this[this.length] = obj;}  
4.           
5. function xhttp(url, callback)  
6. {  
7.     var request = null;  
8.     if (typeof XMLHttpRequest != 'undefined') {  
9.         request = new XMLHttpRequest();  
10.     }  
11.     else if (typeof ActiveXObject != 'undefined') {  
12.         request = new ActiveXObject('Microsoft.XMLHTTP');  
13.     }  
14.     request.open('GET', url, true);  
15.     request.onreadystatechange = function () {  
16.         if (request.readyState == 4) {  
17.             callback(request.responseText);  
18.         }  
19.     };  
20.     request.send(null);           
21. }  
22. function add_scripts(jss, callback)  
23. {  
24.     var func = function( jss, idx, callback){  
25.         if (idx == jss.length) {callback();return};  
26.         add_script(jss[idx], function(){func(jss, ++idx, callback);});  
27.     }  
28.     func(jss, 0, callback);  
29. }  
30. function add_script(js, callback)  
31. {  
32.     if (__includes__.indexOf(js) > -1){callback();return;}  
33.     __includes__.add(js);      
34.     xhttp(js, function(js_content){  
35.         var head = document.getElementsByTagName('head')[0];      
36.         script = document.createElement('script');  
37.         head.appendChild(script);  
38.        // script.innerHTML = js_content;  //原帖是這個...本人測試這行..無效 必須用text屬性賦值
    
39. script.defer=true; script.type='text/javascript';script.language='javascript';//本人測試修正..添加
                script.text=js_content;//本人測試修正..添加//zfrong 09.5.20
40.         callback();  
41.     });  
42. }  
43.           
44.         function include_js(js)  
45.         {  
46.             if (__includes__.indexOf(js) > -1)return;  
47.             __includes__.add(js);  
48.             var head = document.getElementsByTagName('head')[0];      
49.             script = document.createElement('script');  
50.             script.src = js;  
51.             script.type = 'text/javascript';  
52.             head.appendChild(script);  
53.         }     

var __includes__ = new Array;  Array.prototype.indexOf = function(obj){ for(var i = 0; i < this.length; i++){if (this[i] == obj)return i;}return -1;}Array.prototype.add = function(obj){this[this.length] = obj;}function xhttp(url, callback){    var request = null;    if (typeof XMLHttpRequest != 'undefined') {        request = new XMLHttpRequest();    }    else if (typeof ActiveXObject != 'undefined') {        request = new ActiveXObject('Microsoft.XMLHTTP');    }    request.open('GET', url, true);    request.onreadystatechange = function () {        if (request.readyState == 4) {            callback(request.responseText);        }    };    request.send(null);}function add_scripts(jss, callback){    var func = function( jss, idx, callback){        if (idx == jss.length) {callback();return};        add_script(jss[idx], function(){func(jss, ++idx, callback);});    }    func(jss, 0, callback);}function add_script(js, callback){    if (__includes__.indexOf(js) > -1){callback();return;}    __includes__.add(js);        xhttp(js, function(js_content){        var head = document.getElementsByTagName('head')[0];        script = document.createElement('script');        head.appendChild(script);        script.innerHTML = js_content;        callback();    });}function include_js(js){if (__includes__.indexOf(js) > -1)return;__includes__.add(js);var head = document.getElementsByTagName('head')[0];script = document.createElement('script');script.src = js;script.type = 'text/javascript';head.appendChild(script);}

 

 當我在html文檔中引入的時候，我用 include_js，當我在js檔案中引入js時候，我使用add_scripts,add_script

 

Js代碼

1. add_scripts(['test1.js', 'test2.js']), function(){  
2. //代碼主體  
3.   
4. });  

add_scripts(['test1.js', 'test2.js']), function(){//代碼主體});

 

 add_scripts方法使用了xmlhttp來讀入js內容，並把讀入的內容的寫到一個新的script標籤內，讀入是非同步執行的，當執行完畢後，會調用callback、