Compatible Dynamic loading JS "original"

Compatible dynamic loading JS

Dick Silk is a tragedy, 51 still have to home knocking code research technology.

Speaking of dynamic loading JS, make the web certainly not unfamiliar, the famous Yui Library has a powerful modular dynamic loading JS mechanism. In the code volume is constantly huge today, dynamic loading JS role is still very obvious. In fact, this technology is already very old, but found that the network of a lot of information is also very old. Eh, can not, self-reliance, life is always accumulating, not to mention as a procedural ape it.

About Dynamic JS We are more concerned about two points, how compatible? How do I control whether it is synchronous or asynchronous? It is now analyzed for 4 common scenarios. The first 3 types are asynchronous, and the last 1 are synchronous.

Method 1:

<script type= "Text/javascript" >     document.write ("<script src= ' test.js ' ><\/script>");  </script>

Analysis: Asynchronous, good compatibility (tested multi-version ie, FF, Chrome), but you write the entire HTML document is replaced with blank, document you have to change.

Method 2:

<script src= "id=" S1 "></script>  <script language=" JavaScript ">      document.getElementById ("S1"). src= "Test.js"  </script>

Analysis: Asynchronous, Compatibility is poor (the low version of IE can, my IE10, FF, Chrome have failed, the Internet can search for reasons), should directly abandon this program.

Method 3

<script type= "Text/javascript" >     var ohead = document.getelementsbytagname (' HEAD '). Item (0);      var oscript= document.createelement ("script");      Oscript.type = "Text/javascript";      Oscript.src= "Test.js";      Ohead.appendchild (Oscript);  

Analysis:, asynchronous, good compatibility (tested multi-version ie, FF, Chrome), other not much to say, highly recommended .

Method 4

<script type= "Text/javascript" src= "Jquery.js" > <script type= "Text/javascript" > $ (document). Ready ( function () {        //async is false when it is synchronous    //datatype for script has helped you add the returned result to the document with the script type DOM element, if cross-domain, post will be converted to get    $.ajax ({type: ' GET ', url: ' test.js ', Async:false,datatype, ' script '})   }); </script>

Analysis: Using XMLHttpRequest Dynamic loading technology, White is Ajax, in fact, is in the above three methods on the basis of packaging on a layer of Ajax, synchronous asynchronous you control, compatibility depends on which method you use to achieve, I gave the example directly using the jquery library, Compatibility is very good, and you do not need to write a bunch of things about xmlhttprequest, if you do not want to use a third-party library, Baidu a manual implementation of Ajax it.