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
- 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 compute de_js (JS)
- {
- If (_ includes _. indexof (JS)>-1) return;
- _ Nodes des _. Add (JS );
- VaR head = Document. getelementsbytagname ('head') [0];
- Script = Document. createelement ('script ');
- Script. src = JS;
- Script. type = 'text/JavaScript ';
- Head. appendchild (SCRIPT );
- }
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
- 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 ;}
- _ Nodes des _. Add (JS );
- Xhttp (JS, function (js_content ){
- VaR head = Document. getelementsbytagname ('head') [0];
- Script = Document. createelement ('script ');
- Head. appendchild (SCRIPT );
- // 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.
- 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
- Callback ();
- });
- }
- Function compute de_js (JS)
- {
- If (_ includes _. indexof (JS)>-1) return;
- _ Nodes des _. Add (JS );
- VaR head = Document. getelementsbytagname ('head') [0];
- Script = Document. createelement ('script ');
- Script. src = JS;
- Script. type = 'text/JavaScript ';
- Head. appendchild (SCRIPT );
- }
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
- Add_scripts (['test1. js', 'test2. js']), function (){
- // Code subject
- });
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,