Netscape 最初開(kāi)發(fā) Mozilla 瀏覽器的時(shí)候，明智地決定支持 W3C 標(biāo)準(zhǔn)。因此，Mozilla 和 Netscape Navigator 4.x 以及 Microsoft Internet Explorer 遺留代碼不完全向后兼容，比如后面將提到 Mozilla 不支持 <layer>。Internet Explorer 4 這些在 W3C 標(biāo)準(zhǔn)的概念出現(xiàn)之前建立的瀏覽器繼承了很多古怪之處。本文中將討論 Mozilla 的特殊模式，它為 Internet Explorer 和其他遺留瀏覽器提供了強(qiáng)大的 HTML 向后兼容功能。

我還將討論 Mozilla 支持的非標(biāo)準(zhǔn)技術(shù)，如 XMLHttpRequest 和富文本編輯，因?yàn)楫?dāng)時(shí) W3C 還沒(méi)有對(duì)應(yīng)的標(biāo)準(zhǔn)。其中包括：

• HTML 4.01 和 XHTML 1.0/1.1
• 級(jí)聯(lián)樣式表（CSS）：CSS Level 1、CSS Level 2 以及 CSS Level 3 的部分。
• 文檔對(duì)象模型（DOM）：DOM Level 1、 DOM Level 2 和 DOM Level 3 的部分
• 數(shù)學(xué)標(biāo)記語(yǔ)言：MathML Version 2.0
• 可擴(kuò)展標(biāo)記語(yǔ)言（XML）：XML 1.0、Namespaces in XML、Associating Style Sheets with XML Documents 1.0、Fragment Identifier for XML
• XSL 轉(zhuǎn)換：XSLT 1.0
• XML Path 語(yǔ)言：XPath 1.0
• 資源描述框架：RDF
• 簡(jiǎn)單對(duì)象訪問(wèn)協(xié)議：SOAP 1.1
• ECMA-262 修訂版 3（JavaScript 1.5）：ECMA

通用的跨瀏覽器編碼技巧

雖然存在 Web 標(biāo)準(zhǔn)，但不同瀏覽器的行為并不完全相同（實(shí)際上同一個(gè)瀏覽器在不同的平臺(tái)上行為也不相同）。很多瀏覽器，如 Internet Explorer 依然支持 W3C 之前的、從未在 W3C 符合瀏覽器中獲得廣泛支持的 API。

深入討論 Mozilla 和 Internet Explorer 的區(qū)別之前，首先介紹一下使 Web 應(yīng)用程序具備可擴(kuò)展性以便日后增加新瀏覽器支持的一些基本方法。

因?yàn)椴煌臑g覽器有時(shí)會(huì)為同樣的功能使用不同的 API，因此經(jīng)常會(huì)在代碼中看到很多 if() else() 塊，來(lái)區(qū)別對(duì)待不同的瀏覽器。下面的代碼塊用于 Internet Explorer：

 
. . . 

var elm; 

if (ns4) 
 elm = document.layers["myID"]; 
else if (ie4) 
 elm = document.all["myID"]; 

上述代碼不具備可擴(kuò)展性，如果需要支持新的瀏覽器，必須修改 Web 應(yīng)用程序中所有這樣的代碼塊。

避免為新瀏覽器重新編碼最簡(jiǎn)單的辦法就是抽象功能。不要使用層層嵌套的 if() else() 塊，把通用的任務(wù)抽象成單獨(dú)的函數(shù)可以提高效率。這樣不但代碼更易于閱讀，還便于增加新客戶(hù)機(jī)支持：

 
var elm = getElmById("myID"); 

function getElmById(aID){ 
 var element = null; 

 if (isMozilla || isIE5) 
 ?element = document.getElementById(aID) 
 else if (isNetscape4) 
 element = document.layers[aID] 
 else if (isIE4) 
 element = document.all[aID]; 

 return element; 
} 

上述代碼仍然存在瀏覽器嗅探 或者檢測(cè)用戶(hù)使用何種瀏覽器的問(wèn)題。瀏覽器嗅探一般通過(guò)用戶(hù)代理完成，比如：

 
 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016 

雖然使用用戶(hù)代理來(lái)嗅探瀏覽器提供了所用瀏覽器的詳細(xì)信息，但是出現(xiàn)新的瀏覽器版本時(shí)處理用戶(hù)代理的代碼可能出錯(cuò)，因而需要修改代碼。

如果瀏覽器的類(lèi)型無(wú)關(guān)緊要（假設(shè)禁止不支持的瀏覽器訪問(wèn) Web 應(yīng)用程序），最好通過(guò)瀏覽器本身的能力來(lái)嗅探。一般可以通過(guò)測(cè)試需要的 JavaScript 功能來(lái)完成。比如，與其使用：

 
 if (isMozilla || isIE5) 

不如用：

 
 if (document.getElementById) 

這樣不用任何修改，在其他支持該方法的瀏覽器如 Opera 或 Safari 上也能工作。

但是如果準(zhǔn)確性很重要，比如要驗(yàn)證瀏覽器是否滿(mǎn)足 Web 應(yīng)用程序的版本要求或者嘗試避免某個(gè) bug，則必須使用用戶(hù)代理嗅探。

JavaScript 還允許使用內(nèi)嵌條件語(yǔ)句，有助于提高代碼的可讀性：

 
 var foo = (condition) ? conditionIsTrue : conditionIsFalse; 

比如，要檢索一個(gè)元素，可以用如下代碼：

 
function getElement(aID){ 
 return (document.getElementById) ? document.getElementById(aID)
          : document.all[aID];
} 

回頁(yè)首

Mozilla 和 Internet Explorer 的區(qū)別

首先討論 Mozilla 和 Internet Explorer 在 HTML 行為方式上的區(qū)別。

工具提示

遺留瀏覽器在 HTML 中引入了工具提示，在鏈接上顯示 alt 屬性作為工具提示的內(nèi)容。最新的 W3C HTML 規(guī)范增加了 title 屬性，用于包含鏈接的詳細(xì)說(shuō)明?，F(xiàn)代瀏覽器應(yīng)該使用 title 屬性顯示工具提示，Mozilla 僅支持用該屬性顯示工具提示而不能用 alt 屬性。

實(shí)體

HTML 標(biāo)記可以包含多種實(shí)體，W3 標(biāo)準(zhǔn)體 專(zhuān)門(mén)作了規(guī)定。可以通過(guò)數(shù)字或者字符引用來(lái)引用這些實(shí)體。比如，可以用 #160 或者等價(jià)的字符引用   來(lái)引用空白字符  。

一些舊式瀏覽器，如 Internet Explorer，有一些怪異的地方，比如允許用正常文本內(nèi)容替換實(shí)體后面的分號(hào)（;）：

 
 &nbsp Foo 
 &nbsp&nbsp Foo 

Mozilla 將把上面的 &nbsp 呈現(xiàn)為空格，雖然違反了 W3C 規(guī)范。如果后面緊跟著更多字符，瀏覽器就不能解析 &nbsp，如：

 
 &nbsp12345 

這樣的代碼在 Mozilla 中無(wú)效，因?yàn)檫`反了 W3 標(biāo)準(zhǔn)。為了避免瀏覽器的差異，應(yīng)堅(jiān)持使用正確的形式（ ）。

回頁(yè)首

DOM 差異

文檔對(duì)象模型（DOM）是包含文檔元素的樹(shù)狀結(jié)構(gòu)。可以通過(guò) JavaScript API 來(lái)操縱它，對(duì)此 W3C 已有標(biāo)準(zhǔn)。但是在 W3C 標(biāo)準(zhǔn)化之前，Netscape 4 和 Internet Explorer 4 以類(lèi)似的方式實(shí)現(xiàn)了這種 API。Mozilla 僅實(shí)現(xiàn)了 W3C 標(biāo)準(zhǔn)不支持的那些遺留 API。

訪問(wèn)元素

未按照跨瀏覽器的方式檢索元素的引用，應(yīng)使用 document.getElementById(aID)，該方法可用于 Internet Explorer 5.5+、Mozilla，是 DOM Level 1 規(guī)范的一部分。

Mozilla 不支持通過(guò) document.elementName 甚至按照元素名來(lái)訪問(wèn)元素，而 Internet Explorer 則支持這種方法（也稱(chēng)為全局名稱(chēng)空間污染）。Mozilla 也不支持 Netscape 4 的 document.layers 方法和 Internet Explorer 的 document.all 方法。除了 document.getElementById 可以檢索元素之外，還可用 document.layers 和 document.all 獲得具有特定標(biāo)簽名稱(chēng)的全部文檔元素列表，比如所有的 <div> 元素。

W3C DOM Level 1 使用 getElementsByTagName() 方法獲得所有相同標(biāo)簽名的元素的引用。該方法在 JavaScript 中返回一個(gè)數(shù)組，可用于 document 元素，也可用于其他節(jié)點(diǎn)只檢索對(duì)應(yīng)的子樹(shù)。要獲得 DOM 樹(shù)中所有元素的列表，可使用 getElementsByTagName(*)。

表 1 中列出了 DOM Level 1 方法，大部分用于把元素移動(dòng)到特定位置或切換其可視性（菜單、動(dòng)畫(huà)）。Netscape 4 使用 <layer> 標(biāo)簽（Mozilla 不支持）作為可以任意定位的 HTML 元素。在 Mozilla 中，可使用 <div> 標(biāo)簽定位元素，Internet Explorer 也用它，HTML 規(guī)范中也包含它。

表 1. 用于訪問(wèn)元素的方法

遍歷 DOM

Mozilla 通過(guò) JavaScript 支持遍歷 DOM 樹(shù)的 W3C DOM API（如表 2 所示）。文檔中每個(gè)節(jié)點(diǎn)都可使用這些 API 方法，可以在任何方向上遍歷樹(shù)。Internet Explorer 也支持這些 API，還支持原來(lái)用于遍歷 DOM 樹(shù)的 API，比如 children 屬性。

表 2. 用于遍歷 DOM 的方法

Internet Explorer 有一種非標(biāo)準(zhǔn)的特殊行為，這些 API 很多跳過(guò)（比如）新行字符生成的空白文本節(jié)點(diǎn)。Mozilla 則不跳過(guò)，因此有時(shí)候需要區(qū)分這些節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)都有一個(gè) nodeType 屬性指定了節(jié)點(diǎn)類(lèi)型。比如，元素節(jié)點(diǎn)類(lèi)型是 1，文本節(jié)點(diǎn)是 3，而注釋節(jié)點(diǎn)是 8。僅處理元素節(jié)點(diǎn)最好的辦法是遍歷所有子節(jié)點(diǎn)，然后處理那些 nodeType 為 1 的節(jié)點(diǎn)：

 
 HTML: 
 <div id="foo"> 
  <span>Test</span> 
 c </div> 

 JavaScript: 
 var myDiv = document.getElementById("foo"); 
 var myChildren = myXMLDoc.childNodes; 
 for (var i = 0; i < myChildren.length; i++) { 
  if (myChildren[i].nodeType == 1){ 
  // element node
  }
 }

生成和操縱內(nèi)容

Mozilla 支持向 DOM 動(dòng)態(tài)增加內(nèi)容的遺留方法，如 document.write、document.open 和 document.close。Mozilla 也支持 Internet Explorer 的 InnerHTML 方法，該方法基本上可以在任何節(jié)點(diǎn)上使用。但是不支持 OuterHTML（圍繞著元素添加標(biāo)記，標(biāo)準(zhǔn)中也沒(méi)有等價(jià)的方法）和 innerText（設(shè)置節(jié)點(diǎn)的文本值，在 Mozilla 中可使用 textContent）。

Internet Explorer 有一些非標(biāo)準(zhǔn)的、Mozilla 不支持的內(nèi)容操作方法，包括檢索值、插入文本以及鄰近某個(gè)節(jié)點(diǎn)插入元素，比如 getAdjacentElement 和 insertAdjacentHTML。表 3 說(shuō)明了 W3C 標(biāo)準(zhǔn)和 Mozilla 操縱內(nèi)容的方法，這些方法適用于任何 DOM 節(jié)點(diǎn)。

表 3. Mozilla 用于操縱內(nèi)容的方法

文檔片斷

出于性能方面的原因，可以在內(nèi)存中創(chuàng)建文檔而不是處理已有文檔的 DOM。DOM Level 1 Core 引入了文檔片斷，這是一種輕型文檔包含一般文檔接口的一個(gè)子集。比如沒(méi)有 getElementById 但是有 appendChild。很容易向已有文檔添加文檔片斷。

Mozilla 使用 document.createDocumentFragment() 創(chuàng)建文檔片斷，該方法返回一個(gè)空的文檔片斷。

但是，Internet Explorer 的文檔片斷實(shí)現(xiàn)沒(méi)有遵循 W3C 標(biāo)準(zhǔn)，僅僅返回一般的文檔。

回頁(yè)首

JavaScript 差異

Mozilla 和 Internet Explorer 的多數(shù)差異都和 JavaScript 有關(guān)。但問(wèn)題通常源自瀏覽器向 JavaScript 公開(kāi)的 API，比如 DOM 鉤子。兩種瀏覽器在核心 JavaScript 上區(qū)別不大，遇到的問(wèn)題通常和時(shí)間有關(guān)。

JavaScript date 差異

Date 惟一的區(qū)別是 getYear 方法。根據(jù) ECMAScript 規(guī)范（這是 JavaScript 所遵循的規(guī)范），該方法沒(méi)有解決千年問(wèn)題，在 2004 年運(yùn)行 new Date().getYear() 將返回“104”。根據(jù) ECMAScript 規(guī)范，getYear 返回的年份減去 1900 最初是為了在 1998 年返回“98”。ECMAScript Version 3 廢止了 getYear，用 getFullYear() 代替。Internet Explorer 修改了 getYear() 使其和 getFullYear() 類(lèi)似，消除了千年問(wèn)題，而 Mozilla 堅(jiān)持采用標(biāo)準(zhǔn)的行為方式。

JavaScript 執(zhí)行差異

不同的瀏覽器執(zhí)行 JavaScript 的方式是不同的。比如，下列代碼假設(shè) script 塊執(zhí)行的時(shí)候 div 節(jié)點(diǎn)已經(jīng)存在于 DOM 中：

 
... 
<div id="foo">Loading...</div> 

<script> 
 document.getElementById("foo").innerHTML = "Done."; 
</script> 

但是并不能保證這一點(diǎn)。為了保證所有的元素已經(jīng)存在，應(yīng)該對(duì) <body> 元素使用 onload 事件處理程序：

 
<body onload="doFinish()"> 

<div id="foo">Loading...</div> 

<script> 
 function doFinish() { 
 var element = document.getElementById("foo");
	 element.innerHTML = "Done."; 
 } 
</script> 
... 

這類(lèi)與時(shí)間有關(guān)的問(wèn)題也和硬件有關(guān)，速度慢的系統(tǒng)可能會(huì)發(fā)現(xiàn)速度快的系統(tǒng)隱藏起來(lái)的 bug。一個(gè)具體的例子是 window.open，它打開(kāi)新的窗口：

 
<script> 
 function doOpenWindow(){ 
var myWindow = window.open("about:blank"); 
myWindow.location.; 
 } 
</script> 

這段代碼的問(wèn)題在于 window.open 是異步的，在窗口打開(kāi)之前沒(méi)有阻塞 JavaScript 的執(zhí)行。因此，window.open 后面的行有可能在新窗口打開(kāi)之前執(zhí)行?？梢栽谛麓翱诘?onload 處理程序中解決這個(gè)問(wèn)題，然后回調(diào)打開(kāi)它的窗口（使用 window.opener）。

JavaScript 生成 HTML 的差別

JavaScript 可以通過(guò) document.write 即時(shí)用字符串生成 HTML。主要的問(wèn)題在于，如果內(nèi)嵌在 HTML 文檔（因此也在一個(gè) <script> 標(biāo)簽中）的 JavaScript 生成的 HTML 又包含 <script> 標(biāo)簽怎么辦。如果文檔采用 嚴(yán)格呈現(xiàn)模式，就會(huì)把字符串中的 </script> 解釋成外層 <script> 的結(jié)束標(biāo)簽。下面的代碼很好地說(shuō)明了這一點(diǎn)：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
... 
<script> 
 document.write("<script>alert("Hello")</script>") 
</script> 

由于該頁(yè)面采用嚴(yán)格模式，Mozilla 解析器就會(huì)看到第一個(gè) <script> 并解析它直到發(fā)現(xiàn)第一個(gè)結(jié)束標(biāo)簽，即第一個(gè) </script> 。這是因?yàn)榻馕銎鞑恢?JavaScript（或者其他任何語(yǔ)言）何時(shí)采用嚴(yán)格模式。在特殊模式下，解析器在解析的過(guò)程中分析 JavaScript（因而降低了速度）。Internet Explorer 總是采用特殊模式，因此不真正支持 XHTML。為了在 Mozilla 中使用嚴(yán)格模式，需要將字符串分解成兩部分：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
... 
<script> 
 document.write("<script>alert("Hello")</" + "script>") 
</script> 

調(diào)試 JavaScript

Mozilla 提供了多種方法調(diào)試為 Internet Explorer 創(chuàng)建的應(yīng)用程序中的 JavaScript 相關(guān)問(wèn)題。第一個(gè)工具是內(nèi)置的 JavaScript 控制臺(tái)，如圖 1 所示，它記錄了錯(cuò)誤和警告信息。在 Mozilla 中選擇 Tools -> Web Development -> JavaScript Console，或者在 Firefox（來(lái)自 Mozilla 的獨(dú)立瀏覽器產(chǎn)品）中選擇 Tools -> JavaScript Console 就能打開(kāi)它。

JavaScript 控制臺(tái)可以顯示完整的日志列表，也可以分別顯示錯(cuò)誤、警告和消息。圖 1 中的錯(cuò)誤消息表明，aol.com 第 95 行訪問(wèn)的變量 is_ns70 不存在。單擊該鏈接可以打開(kāi) Mozilla 內(nèi)部的查看源代碼窗口，突出顯示出錯(cuò)的一行。

控制臺(tái)還允許對(duì) JavaScript 求值。要計(jì)算輸入的 JavaScript 語(yǔ)法，在輸入字段中輸入 1+1 然后按 Evaluate，結(jié)果如圖 2 所示。

Mozilla 的 JavaScript 引擎內(nèi)建了對(duì)調(diào)試的支持，從而為 JavaScript 開(kāi)發(fā)人員提供了強(qiáng)大的工具。圖 3 所示的 Venkman 是一種強(qiáng)大的跨平臺(tái) JavaScript 調(diào)試器，它與 Mozilla 集成在一起。它通常和 Mozilla 發(fā)行包捆綁在一起，可以通過(guò)選擇 Tools -> Web Development -> JavaScript Debugger 打開(kāi)它。Firefox 沒(méi)有捆綁這個(gè)調(diào)試器，但是可以從 http://www.mozilla.org/projects/venkman/ 下載安裝。還可以在開(kāi)發(fā)頁(yè)面上找到相關(guān)教程，開(kāi)發(fā)頁(yè)面的 URL 為 http://www.hacksrus.com/~ginda/venkman/。

JavaScript 調(diào)試器可以調(diào)試在 Mozilla 瀏覽器窗口中運(yùn)行的 JavaScript。它支持?jǐn)帱c(diǎn)管理、查看調(diào)用棧和變量/對(duì)象檢查這樣的標(biāo)準(zhǔn)調(diào)試特性。所有特性都可通過(guò)用戶(hù)界面或者調(diào)試器的交互控制臺(tái)來(lái)訪問(wèn)。通過(guò)控制臺(tái)，可以在和調(diào)試的 JavaScript 代碼同一作用域內(nèi)執(zhí)行任何 JavaScript。