如何讓動態插入的javascript腳本代碼跑起來。
2024-09-06 12:43:58
供稿：網友
首先，聲明方法很多種，直接間接的方法都有，只羅列一般情況下的兩種模式：
假設我們要裝入的代碼是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
