码迷，mamicode.com
首页 > Web开发 > 详细

js动态加载脚本

时间：2018-01-29 15:46:51      阅读：175      评论：0      收藏：0      [点我收藏+]

标签：plain   ons   address   cal   cti   child   one   http   pop   

　首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下：

 

[javascript] view plain copy
 
  1. function functionOne(){  
  2.     alert("成功加载");  
  3. }  

 

　后面的html文件都创建在同一个目录下。

方法一：直接document.write

　在同一个文件夹下面创建一个function1.html，代码如下：

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function init()  
  6.         {  
  7.             //加载js脚本  
  8.             document.write("<script src=‘package.js‘><\/script>");  
  9.             //加载一个按钮  
  10.             document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");  
  11.             //如果马上使用会找不到，因为还没有加载进来，此处会报错  
  12.             functionOne();  
  13.         }  
  14.         function operation()  
  15.         {  
  16.             //可以运行，显示“成功加载”  
  17.             functionOne();  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <input type="button" value="初始化加载" onclick="init()"/>  
  23. </body>  
  24. </html>  

 

  通过document.write的方式可以往页面写入脚本，如代码所示，点击按钮“初始化加载”后可以加载package.js文件，但是立即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（通过document.write动态创建的“测试运行效果”）发现可以执行，此时脚本已经加载完毕了。由于这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行需要加载的脚本），并且document.write会重写界面，明显不实用。

 

方法二：动态改变已有script的src属性

　　在同一个文件夹下面创建一个function2.html，代码如下：

 

[javascript] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript" id="yy" src=""></script>  
  5.     <script type="text/javascript">  
  6.         function init()  
  7.         {  
  8.             yy.src = "package.js";  
  9.             //如果马上使用会找不到，因为还没有加载进来，此处会报错  
  10.             functionOne();  
  11.         }  
  12.         function operation()  
  13.         {  
  14.             //可以运行，显示“成功加载”  
  15.             functionOne();  
  16.         }  
  17.     </script>  
  18. </head>  
  19. <body>  
  20.     <input type="button" value="测试按钮" onclick="init()"/>  
  21.     <input type="button" value="测试运行效果" onclick="operation()"/>  
  22. </body>  
  23. </html>  

 

　此种方法的好处在于不会改变界面元素，不至于重写界面元素，但是同样是异步加载，会有同样的问题。

 

方法三：动态插入外部js文件（异步）

　　在同一个文件夹下面创建一个function3.html，代码如下：

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function init()  
  6.         {  
  7.             var myScript= document.createElement("script");  
  8.             myScript.type = "text/javascript";  
  9.             myScript.src="package.js";  
  10.             document.body.appendChild(myScript);  
  11.             //如果马上使用会找不到，因为还没有加载进来  
  12.             functionOne();  
  13.         }  
  14.         function operation()  
  15.         {  
  16.             //可以运行，显示“成功加载”  
  17.             functionOne();  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <input type="button" value="测试按钮" onclick="init()"/>  
  23.     <input type="button" value="测试运行效果" onclick="operation()"/>  
  24. </body>  
  25. </html>  



 

　此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载，存在同样的问题。

　这三种方法都是异步执行的，所以在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

　不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行，然后你发现functionOne就可以运行了，或者你的后期代码需要在另一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面肯定不可能使用这些方法。

　其实第三种方法改一点就变成同步加载了。

 

方法四：动态插入JavaScript代码（同步）

　　在同一个文件夹下面创建一个function4.html，代码如下：

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function init()  
  6.         {  
  7.    
  8.             var myScript= document.createElement("script");  
  9.             myScript.type = "text/javascript";  
  10.             myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));  
  11.             document.body.appendChild(myScript);  
  12.             //此处发现可以运行  
  13.             functionOne();  
  14.         }  
  15.     </script>  
  16. </head>  
  17. <body>  
  18.     <input type="button" value="测试按钮" onclick="init()"/>  
  19. </body>  
  20. </html>  

 

　此方法并没有加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码可以正常运行。但是在IE8以及以下的版本中会导致错误。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。不过可以用<script>元素的text属性来制定js代码，想下面的例子这样：　

 

[javascript] view plain copy
 
  1. var myScript= document.createElement("script");  
  2. myScript.type = "text/javascript";  
  3. myScript.text = "function functionOne(){alert(\"成功运行\"); }";  
  4. document.body.appendChild(myScript);  
  5. //此处可以运行  
  6. functionOne();  

 

　经过这样修改之后的代码可以在IE、Firefox、Opera和Safari3及之后版本中运行。Safari3.0之前的版本虽然不能正确地支持text属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari，可以使用下面代码：　

 

[html] view plain copy
 
  1. var myScript= document.createElement("script");  
  2.  myScript.type = "text/javascript";  
  3.  var code = "function functionOne(){alert(\"成功运行\"); }";  
  4.  try{  
  5.      myScript.appendChild(document.createTextNode(code));  
  6.  }  
  7.  catch (ex){  
  8.      myScript.text = code;  
  9.  }  
  10.  document.body.appendChild(myScript);  
  11.  //此处发现可以运行  
  12.  functionOne();  

 

　这里，首先尝试标准的DOM文本节点方法，因为除了IE8以及以下，所有浏览器都支持这种方式。如果这行代码抛出了错误，那么说明是IE8以及以下，于是就必须使用text属性了。整个过程可以用以下函数来表示：

 

[javascript] view plain copy
 
  1. function loadScriptString(code)  
  2.        {  
  3.            var myScript= document.createElement("script");  
  4.            myScript.type = "text/javascript";  
  5.            try{  
  6.                myScript.appendChild(document.createTextNode(code));  
  7.            }  
  8.            catch (ex){  
  9.                myScript.text = code;  
  10.            }  
  11.            document.body.appendChild(myScript);  
  12.        }  

 

　然后你可以在其他地方使用此方法来加载需要使用的代码。实际上，这样执行代码与在全局作用于中把相同字符串传递给eval()是一样的。但是我们这里只能使用字符串形式的代码，也有局限性，用户一般希望提供的方法形如loadScriptAddress("package.js")的方式，所以我们还需要继续讨论。

 

方法五：XMLHttpRequest/ActiveXObject异步加载

　　在同一个文件夹下面创建一个function5.html，代码如下：

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function init()  
  6.         {  
  7.             //加载package.js文件，设置script的id为yy  
  8.             ajaxPage("yy","package.js");  
  9.             //此方法为package.js里面的方法，此处执行方法成功  
  10.             functionOne();  
  11.         }  
  12.         function ajaxPage(sId,url)  
  13.         {  
  14.             var oXmlHttp = getHttpRequest();  
  15.             oXmlHttp.onreadystatechange = function()  
  16.             {  
  17.                 //4代表数据发送完毕  
  18.                 if ( oXmlHttp.readyState == 4 )  
  19.                 {  
  20.                     //0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存  
  21.                     if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)  
  22.                     {  
  23.                         includeJS(sId,oXmlHttp.responseText);  
  24.                     }  
  25.                     else  
  26.                     {  
  27.                     }  
  28.                 }  
  29.             }  
  30.             oXmlHttp.open("GET",url,true);  
  31.             oXmlHttp.send(null);  
  32.         }  
  33.         function getHttpRequest()  
  34.         {  
  35.             if(window.ActiveXObject)//IE  
  36.             {  
  37.                 return new ActiveXObject("MsXml2.XmlHttp");  
  38.             }  
  39.             else if(window.XMLHttpRequest)//其他  
  40.             {  
  41.                 return new XMLHttpRequest();  
  42.             }  
  43.         }  
  44.         function includeJS(sId,source)  
  45.         {  
  46.             if((source != null)&&(!document.getElementById(sId)))  
  47.             {  
  48.                 var myHead = document.getElementsByTagName("HEAD").item(0);  
  49.                 var myScript = document.createElement( "script" );  
  50.                 myScript.language = "javascript";  
  51.                 myScript.type = "text/javascript";  
  52.                 myScript.id = sId;  
  53.                 try{  
  54.                     myScript.appendChild(document.createTextNode(source));  
  55.                 }  
  56.                 catch (ex){  
  57.                     myScript.text = source;  
  58.                 }  
  59.                 myHead.appendChild( myScript );  
  60.             }  
  61.         }  
  62.     </script>  
  63. </head>  
  64. <body>  
  65.     <input type="button" value="测试按钮" onclick="init()"/>  
  66. </body>  
  67. </html>  

 

　ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，不过是异步加载，也没法运行functionOne，第二次就可以运行了，但是可惜的是在IE、Firefox、Safari下可以运行，在Opera、Chrome下会出错，不过只要发布之后在Chrome和Opera下就不会出现错误了。

　其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

 

方法六：XMLHttpRequest/ActiveXObject同步加载　　

　　在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

 

[html] view plain copy
 
  1. /**  
  2.  * 同步加载js脚本  
  3.  * @param id   需要设置的<script>标签的id  
  4.  * @param url   js文件的相对路径或绝对路径  
  5.  * @return {Boolean}   返回是否加载成功，true代表成功，false代表失败  
  6.  */  
  7. function loadJS(id,url){  
  8.     var  xmlHttp = null;  
  9.     if(window.ActiveXObject)//IE  
  10.     {  
  11.         try {  
  12.             //IE6以及以后版本中可以使用  
  13.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
  14.         }  
  15.         catch (e) {  
  16.             //IE5.5以及以后版本可以使用  
  17.             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  18.         }  
  19.     }  
  20.     else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome  
  21.     {  
  22.         xmlHttp = new XMLHttpRequest();  
  23.     }  
  24.     //采用同步加载  
  25.     xmlHttp.open("GET",url,false);  
  26.     //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错  
  27.     xmlHttp.send(null);  
  28.     //4代表数据发送完毕  
  29.     if ( xmlHttp.readyState == 4 )  
  30.     {  
  31.         //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存  
  32.         if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)  
  33.         {  
  34.             var myHead = document.getElementsByTagName("HEAD").item(0);  
  35.             var myScript = document.createElement( "script" );  
  36.             myScript.language = "javascript";  
  37.             myScript.type = "text/javascript";  
  38.             myScript.id = id;  
  39.             try{  
  40.                 //IE8以及以下不支持这种方式，需要通过text属性来设置  
  41.                 myScript.appendChild(document.createTextNode(xmlHttp.responseText));  
  42.             }  
  43.             catch (ex){  
  44.                 myScript.text = xmlHttp.responseText;  
  45.             }  
  46.             myHead.appendChild( myScript );  
  47.             return true;  
  48.         }  
  49.         else  
  50.         {  
  51.             return false;  
  52.         }  
  53.     }  
  54.     else  
  55.     {  
  56.         return false;  
  57.     }  
  58. }  

 

　此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

　如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

　　在同一个文件夹下面创建一个function7.html，代码如下：

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <script type="text/javascript">  
  5.         function init()  
  6.         {  
  7.             //加载package.js文件，设置script的id为yy  
  8.             loadJs("yy","package.js",callbackFunction);  
  9.    
  10.         }  
  11.         function callbackFunction()  
  12.         {  
  13.             functionOne();  
  14.         }  
  15.         function loadJs(sid,jsurl,callback){  
  16.             var nodeHead = document.getElementsByTagName(‘head‘)[0];  
  17.             var nodeScript = null;  
  18.             if(document.getElementById(sid) == null){  
  19.                 nodeScript = document.createElement(‘script‘);  
  20.                 nodeScript.setAttribute(‘type‘, ‘text/javascript‘);  
  21.                 nodeScript.setAttribute(‘src‘, jsurl);  
  22.                 nodeScript.setAttribute(‘id‘,sid);  
  23.                 if (callback != null) {  
  24.                     nodeScript.onload = nodeScript.onreadystatechange = function(){  
  25.                         if (nodeScript.ready) {  
  26.                             return false;  
  27.                         }  
  28.                         if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == ‘complete‘) {  
  29.                             nodeScript.ready = true;  
  30.                             callback();  
  31.                         }  
  32.                     };  
  33.                 }  
  34.                 nodeHead.appendChild(nodeScript);  
  35.             } else {  
  36.                 if(callback != null){  
  37.                     callback();  
  38.                 }  
  39.             }  
  40.         }  
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <input type="button" value="测试按钮" onclick="init()"/>  
  45. </body>  
  46. </html>  

 

  这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。

js动态加载脚本

标签：plain   ons   address   cal   cti   child   one   http   pop   

原文地址：https://www.cnblogs.com/lhxsoft/p/8376670.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！