Dynamically load js file
Sometimes we need to introduce different js files according to different parameters, and writing tags directly with html cannot meet our needs. We summarize several methods and various requirements for synchronous and asynchronous loading.
1. Direct loading
<div ></div> <script>
2. Asynchronous loading and concurrent execution, but the introduction of js content cannot be used directly
//1.1 Direct ("<script src=''><\/script>"); //1.2 Dynamically change the src attribute of existing scripts //The page contains <script src='' ></ script>('s1').src=""; //1.3 Dynamically create js var rootObject=("divId"); var oScript = ( "script" ); = "text/javascript"; = ; //There is a method function test(){alert("test");} (oScript); //2.0 call js test();//There will be no error in ie, and there will be error in firefox, because firefox defaults to asynchronous loading (while requesting the server to load the file, continue to execute downwards, and call the test() method, and naturally this method cannot be found)
3. Synchronous loading, single-step loading, and the introduction of js content can be used directly
var Skip={}; //Get XMLHttpRequest object (provides the protocol for the client to communicate with the http server)=function (){ if ( ) // Other browsers other than IE return new XMLHttpRequest() ; else if ( ) // IE return new ActiveXObject("") ; }, //Import content =function (rootObject,jsText){ if ( rootObject != null ){ var oScript = ( "script" ); = "text/javascript"; // = sId; // = fileUrl; // = true; = jsText; (oScript); //alert(); } }, //Import file =function (rootObject, fileUrl){ if ( rootObject != null ){ var oScript = ( "script" ); = "text/javascript"; = fileUrl; (oScript); } }, //Synchronous loading=function(rootObject, url){ var oXmlHttp = () ; = function(){//In fact, when importing js is called the second time, because the *.js file exists in the browser, it will not access the server and will not execute this method. This method is only used when it is set to asynchronouslyif ( == 4 ){ //After the execution is completed (returned to the response) if ( == 200 || == 304 ){ //200 reads the corresponding url file, 404 means that this file does not exist ( rootObject, url); } else{ alert( 'XML request error: ' + + ' (' + + ')' ) ; } } } // means that the script will continue to execute after the send() method, without waiting for a response from the server, and the method onreadystatechange() is called in the open() method. By setting this parameter to "false", the additional onreadystatechange code can be omitted, which means that the method after send() is executed after the server returns a response.//2. After synchronously executing the() method, the corresponding content will be returned, while asynchronously or empty. The content will only be available when == 4. Anyway, the synchronous operation after () is equivalent to the operation under == 4, which is equivalent to only this state.('GET', url, false); //When url is a js file, ie will automatically generate '<script src="*.js" type="text/javascript"> </scr ipt>',ff will not(null); (rootObject,); } }; var rootObject=("divId"); (rootObject,"")//The file contains funciotn test(){alert("test");}test();//Even if you call it immediately, there will be no error.</script>
Summarize:
1. When ie dynamically loads js files, it is synchronized by default, and you can not set synchronization (or call() directly)
2. When ff dynamically loads the js file, it defaults to asynchronous and needs to be set to synchronously. You can call it directly after loading.
3. No matter whether ie or ff is dynamically loading js content, there will be no asynchronous problem.
Note: Whether ie or ff loads js on the page (that is, executing the entire page), it is loaded synchronously, unless the script attribute defer="true" is set (this property seems to be only valid for ie)
The above is the summary of several methods of synchronous and asynchronous dynamic introduction of js files brought to you. I hope it will be helpful to you and support me more~