如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來。

更新時(shí)間：2007年01月09日 00:00:00 作者：

首先，聲明方法很多種，直接間接的方法都有，只羅列一般情況下的兩種模式：
假設(shè)我們要裝入的代碼是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標(biāo)簽內(nèi)，執(zhí)行時(shí)大多數(shù)情況下是會(huì)出錯(cuò)，信息為：錯(cuò)誤:缺少對(duì)象
這是由于動(dòng)態(tài)創(chuàng)建對(duì)象script時(shí)，則于a.js還沒有完全載入而導(dǎo)致的。執(zhí)行下面的代碼，你就可以發(fā)現(xiàn)原因了。
<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 : 腳本對(duì)象剛被創(chuàng)建，腳本代碼未載入；
- loading : 腳本代碼載入中；
- loaded : 腳本代碼完成讀入，但尚未開始解釋執(zhí)行；
- interactive : 解釋執(zhí)行過程中；
- complete : 腳本已經(jīng)執(zhí)行完成。

</pre>
<div id="viewer"></div>
<script type="text/javascript">

window.onerror=function(msg,url,line){
  document.getElementById("viewer").innerHTML+='<p style="color:red">錯(cuò)誤:'+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狀態(tài)，在執(zhí)行foo()當(dāng)然是錯(cuò)誤的。但下一個(gè)script標(biāo)簽執(zhí)行中，a.js的readyState是complete了，所以可以執(zhí)行foo()的函數(shù)。由此，我推薦你可以簡單的這樣運(yùn)用動(dòng)態(tài)用生成script標(biāo)簽方法來添加js的url。
解決方法如下
1）用window.setTimeout方法來執(zhí)行，估計(jì)a.js已經(jīng)載入完畢，才執(zhí)行a.js里的函數(shù)。這個(gè)方法仍然不保險(xiǎn)
<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）多加一個(gè)script標(biāo)簽放置要執(zhí)行的代碼
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
</script>
<script>
//多一個(gè)script標(biāo)簽來放置
//這里a.js的readyState已經(jīng)為complete了。
foo();
</script>

二、用XMLHttpRequest和window.execScript動(dòng)態(tài)的執(zhí)行a.js，這個(gè)方法的優(yōu)點(diǎn)比較明顯，但效率可能有所下降，沒有測(cè)試，有興趣的朋友可以自己測(cè)試一下速度。
代碼如下：
<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>
但這個(gè)方法仍有缺點(diǎn)，也就是a.js腳本中的代碼有中文的情況，如何處理？那就要經(jīng)常解碼了，而解碼恰恰是js的軟肋，如果運(yùn)用vbs來解碼，那么兼容也就沒有了。要看自己具體的應(yīng)用了，我在neverModules里加載js包時(shí)用的就是window.execScript方法來解析代碼，這樣更可以配合js namespace的應(yīng)用

順便再加上解碼

<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>

不過大多數(shù)的情況下，第二種方法處理起來應(yīng)該沒有問題，如果要很嚴(yán)格的執(zhí)行的話，第一種方法還是有改進(jìn)的代碼的，比如加載a.js的內(nèi)容，把本身的腳本再次解析再執(zhí)行，但復(fù)雜度就提高了，所以要有一個(gè)非常完美的解決方案，還需要更進(jìn)一步來討論。
我就不寫這么多了，僅僅為一個(gè)提醒，還有一個(gè)拋磚引玉的作用。

您可能感興趣的文章: