如何讓動態插入的javascript指令碼代碼跑起來。

來源:互聯網
上載者:User
javascript|插入|動態|指令碼

首先,聲明方法很多種,直接間接的方法都有,只羅列一般情況下的兩種模式:
假設我們要裝入的代碼是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的內容,把本身的指令碼再次解析再執行,但複雜度就提高了,所以要有一個非常完美的解決方案,還需要更進一步來討論。
我就不寫這麼多了,僅僅為一個提醒,還有一個拋磚引玉的作用。 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。