如何让动态插入的javascript脚本代码跑起来。
                        
                            时间:2021-07-01 10:21:17
                            帮助过:15人阅读
							                        
                     
                    
                    
            首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式: 
假设我们要装入的代码是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的内容,把本身的脚本再次解析再执行,但复杂度就提高了,所以要有一个非常完美的解决方案,还需要更进一步来讨论。 
我就不写这么多了,仅仅为一个提醒,还有一个抛砖引玉的作用。