How to include JavaScript JS files in HTML and JS

Keywords: javascript import, JavaScript include

A common JavaScript method is to insert a script tag into the current HTML document and introduce the Script script into the tag.

 

JS Code

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 compute de_js (JS)
5. {
6. If (_ includes _. indexof (JS)>-1) return;
7. _ Nodes des _. 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);}

 

When you only use this method in your htmlw document, everything is okay. This is actually a quick way to write the script tag.

However, if you use this method in Javascript, the problem arises, for example

I use include_js ("test1.js") in test. js. The variable test1 in test1.js is used in test. js.
In WebKit, The test1 variable is undefined. I don't know if IE and Firefox have this problem. I think it may be because include_js is not synchronous.
Execution result, so I have to use the following methods to improve inlcude_js

 

 

 

JS Code

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 ;}
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. _ Nodes des _. 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; // the original post is this... test this line myself. If it is invalid, the text attribute must be assigned a value.
    
39. Script. Defer = true; script. type = 'text/JavaScript '; script. Language = 'javascript'; // test and modify myself... add
    Script. Text = js_content; // test and modify myself... add // zfrong 09.5.20
40. Callback ();
41. });
42. }
44. Function compute de_js (JS)
45. {
46. If (_ includes _. indexof (JS)>-1) return;
47. _ Nodes des _. 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);}

 

When I introduce it in the HTML document, I use include_js. When I introduce Js in the JS file, I use add_scripts, add_script

 

JS Code

1. Add_scripts (['test1. js', 'test2. js']), function (){
2. // Code subject
4. });

Add_scripts (['test1. js', 'test2. js']), function () {// code body });

 

The add_scripts method uses XMLHTTP to read JS content and writes the read content to a new script label. The read content is executed asynchronously. After the execution is complete, callback,