木子屋 Dnawo's BLOG

动态导入js引发的问题

👤 dnawo 📅 2009-06-29 👁 5352 👍 0 💬 0 🔄 本站原创
比较常见的用于动态导入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)

暂无评论。

计算题
评论需审核通过后显示
← 上一篇 诺基亚5800XM连接PC提示MTP驱动失败解决方法 下一篇 → 详解window.setInterval方法