动态导入js引发的问题

来源：互联网发布：网络的利与弊ppt图片编辑：程序博客网时间：2024/06/05 23:39

比较常见的用于动态导入js的方法有以下两种：

//方法一   document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");     //方法二   var script = document.createElement("script");   script.src = "t.js";   script.type = "text/javascript";   document.getElementsByTagName("head").item(0).appendChild(script);

今天做动态导入时发现了问题，t.js内容如下：

function M(){alert("m");}

调用代码：

document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");   M();

脚本出错，提示缺少对象(使用方法二也有同样的问题)。为了说明问题，我们稍做修改，t.js内容如下：

function M(){alert("m");}   alert("t.js");

调用代码：

document.write("<script language=\"JavaScript\" type=\"text/javascript\" src=\"t.js\"><\/script>");   alert("index.htm");

可以看到，是先弹出"index.htm"，再弹出"t.js"，这说明t.js的导入是在页面脚本执行完后进行的，在执行M()时，M函数还未声明，因而报错。解决方法：

<script>   function bar(u) {       var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();       x.open("GET",u,false);       x.send(null);       s=x.responseText;       try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致与IE的window.execScript方法功能相同   }   bar("t.js");   M();   </script>

采用上边方法的不足是：当index.htm和t.js不在同一台服务器上时，index.htm脚本执行会出错，提示没有权限。下边代码摘自QQ首页，测试通过：

<script type="text/javascript">   var MiniSite=new Object();   MiniSite.Browser={       ie:/msie/.test(window.navigator.userAgent.toLowerCase()),       moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),       opera:/opera/.test(window.navigator.userAgent.toLowerCase()),       safari:/safari/.test(window.navigator.userAgent.toLowerCase())   };   MiniSite.JsLoader={       load:function(sUrl,fCallback){           var _script=document.createElement('script');           _script.setAttribute('charset','gb2312');           _script.setAttribute('type','text/javascript');           _script.setAttribute('src',sUrl);           document.getElementsByTagName('head')[0].appendChild(_script);           if(MiniSite.Browser.ie){               _script.onreadystatechange=function(){                   if(this.readyState=='loaded'||this.readyStaate=='complete'){                       fCallback();                   }               };           }else if(MiniSite.Browser.moz){               _script.onload=function(){                   fCallback();               };           }else{               fCallback();           }       }   };     MiniSite.JsLoader.load("http://www.mzwu.com/t.js",function(){M();});   </script>

原文地址： http://www.ai-java.com/entry/117

0 0