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

首先，声明方法很多种，直接间接的方法都有，只罗列一般情况下的两种模式：假设我们要装入的代码是a.js： var foo=function(){ document.write("I am a.js content foo() function by never-online"); }; 一。直接插入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的应用顺便再加上解码 <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) n'+ ' Asc2Unicode = Chr(n) n'+ 'End Function n'+ 'Function SafeArray2Str(body) n'+ ' SafeArray2Str = CStr(body)n'+ '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的内容，把本身的脚本再次解析再执行，但复杂度就提高了，所以要有一个非常完美的解决方案，还需要更进一步来讨论。我就不写这么多了，仅仅为一个提醒，还有一个抛砖引玉的作用。

How to - Javascript Call, apply, caller - http://www.never-online.net Javascript - 全面理解 caller，callee，call，apply Author: BlueDestiny, never-online From: htt>>>详细阅读

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

地址：http://www.17bianji.com/kaifa2/JS/31134.html

1/2 1