zoukankan      html  css  js  c++  java

  • js动态加载脚本

    　首先我们需要一个被加载的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>  

      这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。
  • 相关阅读:
    Linux C++ 处理 Kill 信号、Ctrl+C信号，便于安全退出
    静态链接libcurl的步骤
    编译器如何C++的函数重载
    单链表逆序 也叫反转
    VC 创建拨号连接A
    强大的vim配置，让编程更随意
    已知二叉树后序遍历序列是DBCEFGHA，中序遍历序列EDCBAHFG，它的前序遍历的序列是?麻烦再画下这二叉树.
    怎样使用IPV6编程
    全面详细介绍libcurl的使用
    ZeroMQ全面介绍
  • 原文地址：https://www.cnblogs.com/lhxsoft/p/8376670.html
Copyright © 2011-2022 走看看