首页 > 代码库 > 兼容的动态加载JS【原】

兼容的动态加载JS【原】

兼容的动态加载JS

屌丝就是悲剧,五一还得宅家里写程序专研技术。

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

关于动态JS大家比較关注的无非就两点,兼容性怎样?怎样控制是同步还是异步?如今针对常见的4种方案来分析。前3种是异步的,最后1种是同步的。

方法1:

<script type="text/javascript">
 
    document.write("<script src=http://www.mamicode.com/‘test.js‘></script>"); 
 
</script>

分析:异步的,兼容性良好(測试了多版本号IE、FF、Chrome),只是你这么写整个HTML文档就被替换成空白的了,document你得想办法改变下。

 

方法2:

<script src=http://www.mamicode.com/‘‘ id="s1"></script> 
 
<script language="javascript"> 
 
    document.getElementById("s1").src="http://www.mamicode.com/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="http://www.mamicode.com/test.js"; 
 
    oHead.appendChild( oScript); 
 
</script> 

分析:、异步的、兼容性良好(測试了多版本号IE、FF、Chrome),其它不多说,强烈推荐

 

方法4

<script type="text/javascript" src="http://www.mamicode.com/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吧。