JavaScript高級程序設計之DOM之DOM 操作技術之動態腳本第10.2.1講


10.2 DOM
操作技術
很多時候,DOM 操作都比較簡明,因此用JavaScript 生成那些通常原本是用HTML 代碼生成的內
容並不麻煩。不過,也有一些時候,操作DOM 並不像表面上看起來那么簡單。由於瀏覽器中充斥着隱

藏的陷阱和不兼容問題,用JavaScript 代碼處理DOM 的某些部分要比處理其他部分更復雜一些。

10.2.1
動態腳本
使用<script>元素可以向頁面中插入JavaScript 代碼,一種方式是通過其src 特性包含外部文件,
另一種方式就是用這個元素本身來包含代碼。而這一節要討論的動態腳本,指的是在頁面加載時不存在,
但將來的某一時刻通過修改DOM 動態添加的腳本。跟操作HTML 元素一樣,創建動態腳本也有兩種方
式:插入外部文件和直接插入JavaScript 代碼。
動態加載的外部JavaScript 文件能夠立即運行,比如下面的<script>元素:

<script type="text/javascript" src="client.js"></script>

這個<script>元素包含了第9 章的客戶端檢測腳本。而創建這個節點的DOM 代碼如下所示:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

顯然,這里的DOM 代碼如實反映了相應的HTML 代碼。不過,在執行最后一行代碼把<script>
元素添加到頁面中之前,是不會下載外部文件的。也可以把這個元素添加到<head>元素中,效果相同。
整個過程可以使用下面的函數來封裝:

function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
然后,就可以通過調用這個函數來加載外部的JavaScript 文件了:

loadScript("client.js");
加載完成后,就可以在頁面中的其他地方使用這個腳本了。問題只有一個:怎么知道腳本加載完成
呢?遺憾的是,並沒有什么標准方式來探知這一點。不過,與此相關的一些事件倒是可以派上用場,但
要取決於所用的瀏覽器,詳細討論請見第13 章。
另一種指定JavaScript 代碼的方式是行內方式,如下面的例子所示:

<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
從邏輯上講,下面的DOM 代碼是有效的:

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);

在Firefox、Safari、Chrome 和Opera 中,這些DOM 代碼可以正常運行。但在IE 中,則會導致錯誤。
IE 將<script>視為一個特殊的元素,不允許DOM 訪問其子節點。不過,可以使用<script>元素的
text 屬性來指定JavaScript 代碼,像下面的例子這樣:

var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);

經過這樣修改之后的代碼可以在IE、Firefox、Opera 和Safari 3 及之后版本中運行。Safari 3.0 之前
的版本雖然不能正確地支持text 屬性,但卻允許使用文本節點技術來指定代碼。如果需要兼容早期版
本的Safari,可以使用下列代碼:

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function sayHi(){alert('hi');}";
try {
script.appendChild(document.createTextNode("code"));
} catch (ex){
script.text = "code";
}
document.body.appendChild(script);
這里,首先嘗試標准的DOM 文本節點方法,因為除了IE(在IE 中會導致拋出錯誤),所有瀏覽器
都支持這種方式。如果這行代碼拋出了錯誤,那么說明是IE,於是就必須使用text 屬性了。整個過程
可以用以下函數來表示:

function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;
}
document.body.appendChild(script);
}

下面是調用這個函數的示例:

loadScriptString("function sayHi(){alert('hi');}");
以這種方式加載的代碼會在全局作用域中執行,而且當腳本執行后將立即可用。實際上,這樣執行
代碼與在全局作用域中把相同的字符串傳遞給eval()是一樣的。



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com