js动态引入的四种方式

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta content="text/html;charset=utf-8" http-equiv="content-type">
   <title> </title>
    <script src='' id="s1"></script>
   <script src="dynamic.js"></script>
 </head>

 <body>
  
 </body>
</html>

test.js

alert("hello! I am test.js");  
var str="1";

dynamic.js

//第一种方式：直接document.write 但这样会把当前的页面全覆写掉  
//document.write("<script src='test.js'><\/script>");  
  
  
//第二种方式:动态改变已有script的src属性  
//s1.src="test.js"  
  
  
//第三种方式：动态创建script元素  
/*    var oHead = document.getElementsByTagName('HEAD').item(0); 
    var oScript= document.createElement("script"); 
    oScript.type = "text/javascript"; 
    oScript.src="test.js"; 
    oHead.appendChild(oScript); 
*/  
//其实原理就是利用dom动态的引入一个js到文件中来~就能和原有的js通信了~  
  
//alert(str);  
  
  
/*以上三种方式都采用异步加载机制，也就是加载过程中，页面会往下走， 
如果这样的话会有问题的,如上面的str就访问不到，因为当程序执行alert(str)时，test.js还在加载Ing.... 
 
<strong><span style="color:#ff0000;">那么第四种就是基于ajax请求的,且是推荐</span></strong> 
*/  
  
function GetHttpRequest()  
{  
    if ( window.XMLHttpRequest ) // Gecko  
        return new XMLHttpRequest() ;  
    else if ( window.ActiveXObject ) // IE  
        return new ActiveXObject("MsXml2.XmlHttp") ;  
}  
  
  
function ajaxPage(sId, url){  
    var oXmlHttp = GetHttpRequest() ;  
    oXmlHttp.onreadystatechange = function()    
     {  
        if (oXmlHttp.readyState == 4)  
        {  
           includeJS( sId, url, oXmlHttp.responseText );  
        }  
    }  
    oXmlHttp.open('GET', url, false);//同步操作  
    oXmlHttp.send(null);  
}  
  
  
function includeJS(sId, fileUrl, source)  
{  
    if ( ( source != null ) && ( !document.getElementById( sId ) ) ){  
        var oHead = document.getElementsByTagName('HEAD').item(0);  
        var oScript = document.createElement( "script" );  
        oScript.type = "text/javascript";  
        oScript.id = sId;  
        oScript.text = source;  
        oHead.appendChild( oScript );  
    }  
}  
  
ajaxPage( "scrA", "test.js" );  
alert( "主页面动态加载JS脚本。");  
alert( "主页面动态加载a.js并取其中的变量：" + str );

 

posted @ 2016-08-22 11:16  飘零枫叶  阅读(15047)  评论(1)  编辑  收藏  举报