日期:2014-05-16  浏览次数:20565 次

动态导入js引发的问题

比较常见的用于动态导入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