兼容的动态载入JS【原】

兼容的动态载入JS

屌丝就是悲剧，五一还得宅家里敲代码专研技术。

说起动态载入JS，搞web的肯定不陌生，著名的YUI库就有强大的模块化的动态载入JS机制。在代码量不断庞大的今天，动态载入JS作用还是很明显的。其实这门技术已经很古老了，但是发现网络上很多资料也同样很古老。诶，没法，自立更生吧，人生总要不断积累的，更何况作为一个程序猿呢。

关于动态JS大家比较关注的无非就两点，兼容性如何？如何控制是同步还是异步？现在针对常见的4种方案来分析。前3种是异步的，最后1种是同步的。

方法1：

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

分析：异步的，兼容性良好（测试了多版本IE、FF、Chrome），不过你这么写整个HTML文档就被替换成空白的了，document你得想办法改变下。

 

方法2：

<script src='' id="s1"></script>  <script language="javascript">      document.getElementById("s1").src="test.js"  </script>

分析：异步的、兼容性很差（低版本的IE可以，我的IE10、FF、Chrome都失效了，网上能搜到原因），应该直接放弃这个方案。

 

方法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);  </script> 

分析：、异步的、兼容性良好（测试了多版本IE、FF、Chrome），其他不多说，强烈推荐。

 

方法4

<script type="text/javascript" src="jquery.js"> <script type="text/javascript"> $(document).ready(function() {        //async为false的时候是同步的    //dataType为script的时候已经帮你把返回结果用script类型的dom元素添加到文档中了，如果跨域，POST会转换为GET    $.ajax({type: 'GET',url:'test.js',async:false,dataType,'script'})   }); </script>

分析：使用xmlHttpRequest的动态加载技术，说白了就是ajax，其实就是在上述三种方法的基础上包装上一层ajax而已，同步异步你自己控制，兼容性如何得看你用哪种方法实现了，我给的例子直接使用了jquery库，兼容性非常好，而且你不需要写一堆关于xmlHttpRequest的东西，若你不想用第三方库，那自己百度个手工实现ajax吧。