分享
 
 
 

如何让动态插入的javascript脚本代码跑起来。

王朝html/css/js·作者佚名  2006-08-11
窄屏简体版  字體: |||超大  

首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式:

假设我们要装入的代码是a.js:

var foo=function(){

document.write("I am a.js content foo() function");

};

一。直接插入src,这种方法简单而直接,但有局限性,

1)

<script>

var x=document.createElement("SCRIPT");

x.src="a.js"; x.defer=true;

document.getElementsByTagName("HEAD")[0].appendChild(x);

foo();

</script>

在如上的代码放上head标签内,执行时大多数情况下是会出错,信息为:错误:缺少对象

这是由于动态创建对象script时,则于a.js还没有完全载入而导致的。执行下面的代码,你就可以发现原因了。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>never-online dynamic code test page</title>

</head>

<body>

<pre>

readyState的含义

- uninitialized : 脚本对象刚被创建,脚本代码未载入;

- loading : 脚本代码载入中;

- loaded : 脚本代码完成读入,但尚未开始解释执行;

- interactive : 解释执行过程中;

- complete : 脚本已经执行完成。

</pre>

<div id="viewer"></div>

<script type="text/javascript">...

window.onerror=function(msg,url,line)...{

document.getElementById("viewer").innerHTML+='<p style="color:red">错误:'+msg+'line:'+line+'</p>';

return true;

}

function bar(u) ...{

var x=document.createElement("SCRIPT");

x.src=u;

x.defer=true;

document.getElementsByTagName("HEAD")[0].appendChild(x);

}

bar("a.js");

(function getReadyState()...{

var e=document.getElementById("viewer")

var x=true;

var a = document.getElementsByTagName("SCRIPT");

for (var i=0; i<a.length; i++) ...{

if (a[i].readyState=='complete' && x!=false) x=true; else x=false

e.innerHTML+=(a[i].src?a[i].src+':':'noname:')+a[i].readyState+"<br />";

}

e.innerHTML+="<hr/>";

if (x) window.clearTimeout(window.timer); else

window.timer=window.setTimeout('getReadyState()',1000);

}());

foo();

</script>

<script type="text/javascript">...

//<![CDATA[

foo();

//]]>

</script>

</body>

</html>

初始值为:

a.js:loading

noname:interactive

我们可以知道,a.js依然在loading状态,在执行foo()当然是错误的。但下一个script标签执行中,a.js的readyState是complete了,所以可以执行foo()的函数。由此,我推荐你可以简单的这样运用动态用生成script标签方法来添加js的url。

解决方法如下

1)用window.setTimeout方法来执行,估计a.js已经载入完毕,才执行a.js里的函数。这个方法仍然不保险

<script>

var x=document.createElement("SCRIPT");

x.src="a.js"; x.defer=true;

document.getElementsByTagName("HEAD")[0].appendChild(x);

window.setTimeout('foo()',1000);

</script>

2)多加一个script标签放置要执行的代码

<script>

var x=document.createElement("SCRIPT");

x.src="a.js"; x.defer=true;

document.getElementsByTagName("HEAD")[0].appendChild(x);

</script>

<script>

//多一个script标签来放置

//这里a.js的readyState已经为complete了。

foo();

</script>

二、用XMLHttpRequest和window.execScript动态的执行a.js,这个方法的优点比较明显,但效率可能有所下降,没有测试,有兴趣的朋友可以自己测试一下速度。

代码如下:

<script language="javascript">

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("a.js");

foo();

</script>

但这个方法仍有缺点,也就是a.js脚本中的代码有中文的情况,如何处理?那就要经常解码了,而解码恰恰是js的软肋,如果运用vbs来解码,那么兼容也就没有了。要看自己具体的应用了,我在neverModules里加载js包时用的就是window.execScript方法来解析代码,这样更可以配合js namespace的应用

加上脚本解码(用vbs来解码):

<script type="text/javascript">

//<![CDATA[

function bar(u) ...{

var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();

x.open("GET",u,false);

x.send(null);

s=parseScript(x.responseText);

try ...{window.execScript(s)}catch(ex)...{window.eval(s)};

}

function parseScript(jscode) ...{

// --- toCurrentCharset(), by aimingoo 解码

window.execScript(''+

'Function Asc2Unicode(n) '+

' Asc2Unicode = Chr(n) '+

'End Function '+

'Function SafeArray2Str(body) '+

' SafeArray2Str = CStr(body) '+

'End Function','VBScript');

var r1 = /%u(..)(..)/g, r2 = /%([8,9,A-F].)%(..)/g;

var toUnicode = function($0, $1, $2) ...{return Asc2Unicode(parseInt($1+$2, 16))}

toCurrentCharset = function(body) ...{

return unescape(escape(SafeArray2Str(body)).replace(r1, "%$2%$1").replace(r2, toUnicode));

}; jscode=toCurrentCharset(jscode);

window.execScript(jscode, 'JavaScript'); //IE有效,vbs解码

return jscode;

}

bar('a.js');

foo();

//]]>

</script>

不过大多数的情况下,第二种方法处理起来应该没有问题,如果要很严格的执行的话,第一种方法还是有改进的代码的,比如加载a.js的内容,把本身的脚本再次解析再执行,但复杂度就提高了,所以要有一个非常完美的解决方案,还需要更进一步来讨论。

我就不写这么多了,仅仅为一个提醒,还有一个抛砖引玉的作用。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有