DOM操作技術----動態腳本
創建動態腳本有兩種方式:插入外部文件和直接插入JavaScript代碼
方式一:插入外部文件
<script type="text/javascript" src="client.js" ></script>
創建此節點的DOM代碼等同於:
var script = documen.createElement("script");
script.type="text/javascript";
script.src="clent.js";
document.body.appendChild(script);
在執行最後一行代碼把<script>元素添加到頁面之前,是不會加載外部文件的。
整個過程可以用以下函數封裝:
function loadScript(url){
var script = documen.createElement("script");
script.type = "text/javascript";
script.src=url;
document.body.appendChild(script);
}
可惜有個問題:沒有標準方式探知腳本是否加載完成。
方式二:指定JavaScript代碼的方式為行內式;
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
邏輯上講,下面的DOM代碼是有效的:
var script = documen.createElement("script");
script.type="text/javascript";
script.appendChild(document.createTextNode(“function sayHi(){alert(“hi”);}”));
document.body.appendChild(script);
但是在IE中會導致錯誤,IE會將<script>視為一個特殊的元素,不允許DOM訪問其子節點;但是,可以用<script>元素的text屬性來指定JavaScript代碼。
var script = documen.createElement("script");
script.type="text/javascript";
script.text=“function sayHi(){alert(“hi”);}”;
document.body.appendChild(script);
但是以上代碼在Safari3.0之前的版本不能支持text屬性,但是可以用文本節點技術指定代碼。
var script = documen.createElement("script");
script.type="text/javascript";
script.code=“function sayHi(){alert(“hi”);}”;
try{
script.appendChild(document.createTextNode(“code”));
}catch(ex){
script.text = "code";
}
document.body.appendChild(script);
總之,首先嘗試標準的DOM文本節點方法,因為除IE會拋出錯誤,所有的瀏覽器都支持這種方式。如果這行代碼拋出了錯誤,南無說明是IE,於是就必須使用text屬性了。整個過程可以封裝一個函數如下:
function loadScriptString(code){
var script = documen.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(“code”));
}catch(ex){
script.text = "code";
}
document.body.appendChild(script);
}
DOM操作技術----動態腳本