木子屋
 

标题: 动态导入js引发的问题

作者: dnawo

日期: 2009-06-29 08:03 PM

分类: 脚本语言

内容: 比较常见的用于动态导入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>
参考文章
·《如何让动态插入的javascript脚本代码跑起来》

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: 动态导入js引发的问题

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.047 ms