|
本文介紹了IE和Navigator兩種瀏覽器對DHTML標準實現的差異，特別是如何編寫Navigator中運行的DHTML程序。
DHTML(Dynamic HTML)是W3C組織提出的一種新的規范，它對原有的HTML做了許多擴充，并結合Javascript，使得靜態的HTML頁面產生了許多動態效果，例如菜單的展開和收起，頁面元素的外觀動態改變等。IE 4.0以上，Navigator 4.0以上的版本都支持這個標準。但是，不同的瀏覽器廠家對它都做了不同程度的擴充。以最流行IE的和NS為例，IE的實現更接近于W3C的方案，而NS，說實話，與W3C的方案差異很大，而且并沒有完全實現，甚至可以說是另一套方案。筆者在初識DHTML時，按照書上講的編寫了幾個小程序，在IE上一試就通，而在NS上可以說費盡了周折才逐漸找到解決方案。由于市面上很少有講述NS的DHTML實現方案的書(大概NS由于的實現不符合標準)，而真正的商業網站至少應同時支持IE和NS這兩種主要的瀏覽器，我愿意把我的一些心得寫出來與大家共享，使大家不必再走我走過的彎路。對于二者的實現相同的部分，本文作一簡略介紹，您若有興趣可參考有關書籍或網上資源。
DHTML實際上由三兩部分組成：CSS(Cascade Style Sheet，級聯樣式表)，層(Layer)和Javascript。
所謂CSS，概念上類似于C++中的類，在類定義中指明元素的外觀樣式，如字體，顏色，大小等等，頁面中的任何一個HTML元素如被指定屬于這個類，就自動擁有該類的特性；還可以為某種HTML元素定義樣式，這樣頁面中的所有這種元素都有了同樣的外觀。如果將這樣的樣式定義存在一個單獨的.css文件中(就象C++那樣將類定義存在 .h文件中)，再在頁面中將其包含進來，則一個網站的所有頁面就有了同樣的外觀。IE和NS對CSS的實現基本相同，在此就不再詳細介紹了。
兩者的差異主要體現在層的實現上。所謂層，就是頁面上的一塊區域，其中可以包含任何的HTML元素，通過改變層的屬性，其間的元素可以跟著出現，消失，更改，移動等。 在IE中，層依靠<DIV></DIV>和<SPAN></SPAN>來實現，兩者基本相同，通常<DIV>用于較大的層，<SPAN>用于較小的層，并且<DIV>在實現的層后面加上一個回車換行，而<SPAN>不加。它的語法如下(二者相同)：
<div id=layername style="style definition">Layer content</div> 或
<div id=layername class="classname">Layer content</div>
其中style definition是一組有分號隔開的樣式定義，常用的有以下幾種：
position：其值可以為absolute和relative，所謂absolute(絕對定位)，就是層的內容不必按照出現的先后次序在瀏覽器上依次排列，而是可以像素為單位定位到瀏覽器用戶區域的任意位置；而relative(相對定位)則是層按照相鄰的內容依次排列。
left，top，width，height：指層的左上角坐標以及它的寬度和高度。
z-index：由于層可以被放置在頁面的任何位置，當它與其它內容重合時，z-index值大的顯示在上面，所有層的z-index值為1。但是在NS中，所有的表單元素(文本框，列表框，按鈕等)，只要是可見的就無法被遮住，而無論z-index值是多少。因此在設計頁面時，要注意不要使動態出現或隱藏的元素(例如彈出式菜單)的位置上放置表單元素。
Visibility：指明層是否可見，通過在程序中動態改變這個值，可以實現層的出現和消失，比如下拉菜單就要依靠它來實現。它的三個候選值為：inherit，可見性與父元素的可見性相同；visible，可見(在NS中是show)；hidden，不可見(在NS中是hide)。
NS同樣支持這兩個標記，但是支持得很不好，經常出現一些莫名其妙的錯誤，我想這可能是出于策略上的考慮，而不見得是NS的產品質量不好。NS引入了另兩個標記，<layer>和<ilayer>，<layer>用于絕對定位，<ilayer>用于相對定位，因此在這兩個標記的樣式定義中沒有position屬性。
兩個瀏覽器對層的不同實現體現在以下幾點：
1. 層的引用。在IE中，頁面上的每個可編程元素(不僅是層，還包括其它任何指明了ID值的元素，詳見下文)都是document.all集合的一項；而在NS中，頁面中每個層，無論是用上面四個標記中的哪個定義的，也無論是絕對或是相對定位，都是document.layers集合的一項。因此，若想引用名為layer1的層，應以如下語法：
IE：document.all["layer1"]或document.all.layer1
NS：document.layers["layer1"]或document.layers.layer1
2. 層的坐標和大小。在IE中，每個涉及層的外觀的屬性，如位置，大小，顏色等，都是層的style屬性集合的以一項，如層的左上角x坐標為document.all.layer1.style.pixelLeft，y坐標為 document.all.layer1.style.pixelTop，寬度為document.all.layer1.style.pixelWidth，高度為document.all.layer1.style.pixelHeight。還有幾組屬性如scrollxxx，offsetxxx，clientxxx，其中xxx為Left，Top，Width，Height ，分別描述層的滾動，位移，客戶區等屬性，詳見MSDN中關于坐標的描述。而在NS中，每個層都有一個clip屬性集，x，y，width，height是這個集的集合元素。
另外，IE中所有元素擁有同一個坐標系，無論它位于層外或層內；在NS中，每個層都有一個獨立的坐標系。
3. 層的內容。IE中的層包含innerHTML和outerHTML屬性(由于并非描述層的外觀，所以它們不是style屬性集的元素，而是層的屬性)，其含義如下：
innerHTML：層中的HTML代碼，但是不包括層的定義。
outerHTML：層中的HTML代碼，且包括層的定義。
改變這些屬性值就可以改變層的內容，如下語句改變層layer1的內容為加粗的字符串"layer1"：document.all.layer1.innerHTML=”<b>layer1</b>” ，而在NS中，每一個document.layers集合中的元素，即一個層，都NS被視為一個獨立的窗口，有獨立document屬性，就象Javascript中的document屬性一樣，通過調用document.write函數，可以動態改變層的內容。上例在NS中應修改為：
document.layers.layer1.document.open();
doucment.layers.layer1.write("<div><b>layer1</b></div>");
document.layers.layer1.document.close;
同樣，對于層中的其它可編程元素，例如圖象，其引用語法如下：document.layers.layer1.document.images[imgname]，而如果該圖象位于層的外面，其語法應為document.images[imgname]，而在IE中，無論圖象位于層內或層外，其語法都是后者。
Javascript是Netscape公司首先提出的一種客戶端編程的腳本語言，隨后有擴展到服務器端。它的語法和概念都類似于C++，但是沒有C++那樣嚴格。IE同樣支持客戶端Javascript(微軟還推出了類似的，功能更強大的Vbscript，但是NS卻不支持)。兩種瀏覽器對Javascript的基本實現是一樣的，但是又都對它做了許多不同的擴展，而在DHTML編程中，很多情況下都需要用到這些擴展。由于此時已經沒有標準可遵循，二者已經看不出有相同之處。例如，瀏覽器的客戶區的寬度，在IE中是document.body.clientWidth，在NS中是window.innerWidth；再比如你想知道用戶按瀏覽器的滾動條滾動了多少像素，在IE中是document.body.scrollTop，在NS中是window.pageYOffset。在這種情況下，你只能查閱二者的文檔。IE的Javascript文檔包含在MSDN中，也可以到微軟的站點上單獨下載。NS的Javascript文檔可以到 http://developer.netscape.com上下載，那里也能得到NS的DHTML文檔。
NS沒有實現的功能。
1.IE中，頁面中的任何元素都是可編程的，只要賦予它ID屬性，其語法如下：
<div id=itemid>content</div>或<span id=itemid>content</span>
而在NS中，除非元素位于層中，否則無法對它編程。
2.IE中增添了元素的漸變(Transition)和濾鏡(Filter)效果，NS中沒有。
3.IE中支持客戶端的數據綁定(Data bind)，即頁面中的某個元素(例如表格中的一個格)可以與服務器端的數據庫的某個字段綁定，在數據內容不變的情況下，可以不必再次訪問數據庫而改變頁面的形式(例如按某個字段重新排序)。NS同樣沒有實現這種特性。
以上列舉了二者的如此之多的差別，那我們如何編寫跨瀏覽器的DHTML頁面呢？一種方法是編寫兩個獨立的頁面，而在入口文件中根據瀏覽器的不同而重定向到不同的頁面，如：
<HTML><BODY>
<Script Language="Javascript">
isNS=(navigator.appName=="Netscape");
if (isNS)
window.location="ns.html";
else
window.location="ie.html";
</Script>
</BODY></HTML>
這種方法簡單，頁面整潔，缺點是有很大冗余，畢竟一個頁面中程序是少量的，大部分靜態內容在兩個瀏覽器中并沒有區別，一旦靜態的內容發生改變必須在兩個頁面中一起更改，而且當包含DHTML的頁面增多時，每一個頁面都需要三個頁面來實現，增大了維護的負擔。
另一種方法是在同一個頁面中集成兩個瀏覽器的代碼。在每一個實現特定功能的函數中都根據瀏覽器的不同分別寫代碼，如：
<HTML><BODY>
<Script Language="Javascript">
isNS=(navigator.appName=="Netscape");
function fun1(){
if (isNS)
//NS codes here
else
//IE codes here
}
</Script>
</BODY></HTML>
對于HTML代碼也不同的部分，可以利用Javascript函數 document.writeln()來實現，例如對于層的定義，可以如下實現：
<Script Language="Javascript">
if(isNS)
document.writeln("<layer id=\"layer1\" left=20 top=30 width=40 height=50 z-index=2>");
else
document.writeln("<div id=\"layer1\" style=\"position:absolute;left:20;top:30;width:40;height:50;z-index:2\">");
</Script>
Layer content here
<Script Language="Javascript">
if(isNS)
document.writeln("</layer>");
else
document.writeln("</div>");
</Script>
這種實現方法維護簡單，缺點是失去了頁面編輯器所見即所得的特性(因為只有到運行時才能將層的定義寫入瀏覽器，在編輯階段它們只是些Javascript程序)，調整層的坐標和大小都比較困難。在實際編程中可以先按一種瀏覽器的定義寫，待調整完畢后再將它轉成另一種定義。但總的來說，這種辦法適合對HTML標準比較熟悉的開發人員。
| 
