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

我還將討論 Mozilla 支持的非標準技術，如 XMLHttpRequest 和富文本編輯，因為當時 W3C 還沒有對應的標準。其中包括：

• HTML 4.01 和 XHTML 1.0/1.1
• 級聯樣式表（CSS）：CSS Level 1、CSS Level 2 以及 CSS Level 3 的部分。
• 文檔對象模型（DOM）：DOM Level 1、 DOM Level 2 和 DOM Level 3 的部分
• 數學標記語言：MathML Version 2.0
• 可擴展標記語言（XML）：XML 1.0、Namespaces in XML、Associating Style Sheets with XML Documents 1.0、Fragment Identifier for XML
• XSL 轉換：XSLT 1.0
• XML Path 語言：XPath 1.0
• 資源描述框架：RDF
• 簡單對象訪問協議：SOAP 1.1
• ECMA-262 修訂版 3（JavaScript 1.5）：ECMA

通用的跨瀏覽器編碼技巧

雖然存在 Web 標準，但不同瀏覽器的行為并不完全相同（實際上同一個瀏覽器在不同的平臺上行為也不相同）。很多瀏覽器，如 InterNET Explorer 依然支持 W3C 之前的、從未在 W3C 符合瀏覽器中獲得廣泛支持的 API。

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

因為不同的瀏覽器有時會為同樣的功能使用不同的 API，因此經常會在代碼中看到很多 if() else() 塊，來區別對待不同的瀏覽器。下面的代碼塊用于 InterNET Explorer：

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

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

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

 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; } 

上述代碼仍然存在瀏覽器嗅探 或者檢測用戶使用何種瀏覽器的問題。瀏覽器嗅探一般通過用戶代理完成，比如：

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

雖然使用用戶代理來嗅探瀏覽器提供了所用瀏覽器的詳細信息，但是出現新的瀏覽器版本時處理用戶代理的代碼可能出錯，因而需要修改代碼。

如果瀏覽器的類型無關緊要（假設禁止不支持的瀏覽器訪問 Web 應用程序），最好通過瀏覽器本身的能力來嗅探。一般可以通過測試需要的 JavaScript 功能來完成。比如，與其使用：

  if (isMozilla || isIE5) 

不如用：

  if (document.getElementById) 

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

但是如果準確性很重要，比如要驗證瀏覽器是否滿足 Web 應用程序的版本要求或者嘗試避免某個 bug，則必須使用用戶代理嗅探。

JavaScript 還允許使用內嵌條件語句，有助于提高代碼的可讀性：

  var foo = (condition) ? conditionIsTrue : conditionIsFalse; 

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

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

回頁首

Mozilla 和 InterNET Explorer 的區別

首先討論 Mozilla 和 InterNET Explorer 在 HTML 行為方式上的區別。

工具提示

遺留瀏覽器在 HTML 中引入了工具提示，在鏈接上顯示 alt 屬性作為工具提示的內容。最新的 W3C HTML 規范增加了 title 屬性，用于包含鏈接的詳細說明。現代瀏覽器應該使用 title 屬性顯示工具提示，Mozilla 僅支持用該屬性顯示工具提示而不能用 alt 屬性。

實體

HTML 標記可以包含多種實體，W3 標準體 專門作了規定。可以通過數字或者字符引用來引用這些實體。比如，可以用 #160 或者等價的字符引用   來引用空白字符  。

一些舊式瀏覽器，如 InterNET Explorer，有一些怪異的地方，比如允許用正常文本內容替換實體后面的分號（;）：

    Foo     Foo 

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

   12345 

這樣的代碼在 Mozilla 中無效，因為違反了 W3 標準。為了避免瀏覽器的差異，應堅持使用正確的形式（ ）。

回頁首

DOM 差異

文檔對象模型（DOM）是包含文檔元素的樹狀結構。可以通過 JavaScript API 來操縱它，對此 W3C 已有標準。但是在 W3C 標準化之前，NETscape 4 和 InterNET Explorer 4 以類似的方式實現了這種 API。Mozilla 僅實現了 W3C 標準不支持的那些遺留 API。

訪問元素

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

Mozilla 不支持通過 document.elementName 甚至按照元素名來訪問元素，而 InterNET Explorer 則支持這種方法（也稱為全局名稱空間污染）。Mozilla 也不支持 NETscape 4 的 document.layers 方法和 InterNET Explorer 的 document.all 方法。除了 document.getElementById 可以檢索元素之外，還可用 document.layers 和 document.all 獲得具有特定標簽名稱的全部文檔元素列表，比如所有的 <div> 元素。

W3C DOM Level 1 使用 getElementsByTagName() 方法獲得所有相同標簽名的元素的引用。該方法在 JavaScript 中返回一個數組，可用于 document 元素，也可用于其他節點只檢索對應的子樹。要獲得 DOM 樹中所有元素的列表，可使用 getElementsByTagName(*)。

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

表 1. 用于訪問元素的方法

遍歷 DOM

Mozilla 通過 JavaScript 支持遍歷 DOM 樹的 W3C DOM API（如表 2 所示）。文檔中每個節點都可使用這些 API 方法，可以在任何方向上遍歷樹。InterNET Explorer 也支持這些 API，還支持原來用于遍歷 DOM 樹的 API，比如 children 屬性。

表 2. 用于遍歷 DOM 的方法

InterNET Explorer 有一種非標準的特殊行為，這些 API 很多跳過（比如）新行字符生成的空白文本節點。Mozilla 則不跳過，因此有時候需要區分這些節點。每個節點都有一個 nodeType 屬性指定了節點類型。比如，元素節點類型是 1，文本節點是 3，而注釋節點是 8。僅處理元素節點最好的辦法是遍歷所有子節點，然后處理那些 nodeType 為 1 的節點：

  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  } }

生成和操縱內容

Mozilla 支持向 DOM 動態增加內容的遺留方法，如 document.write、document.open 和 document.close。Mozilla 也支持 InterNET Explorer 的 InnerHTML 方法，該方法基本上可以在任何節點上使用。但是不支持 OuterHTML（圍繞著元素添加標記，標準中也沒有等價的方法）和 innerText（設置節點的文本值，在 Mozilla 中可使用 textContent）。

InterNET Explorer 有一些非標準的、Mozilla 不支持的內容操作方法，包括檢索值、插入文本以及鄰近某個節點插入元素，比如 getAdjacentElement 和 insertAdjacentHTML。表 3 說明了 W3C 標準和 Mozilla 操縱內容的方法，這些方法適用于任何 DOM 節點。

表 3. Mozilla 用于操縱內容的方法

文檔片斷

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

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

但是，InterNET Explorer 的文檔片斷實現沒有遵循 W3C 標準，僅僅返回一般的文檔。

回頁首

JavaScript 差異

Mozilla 和 InterNET Explorer 的多數差異都和 JavaScript 有關。但問題通常源自瀏覽器向 JavaScript 公開的 API，比如 DOM 鉤子。兩種瀏覽器在核心 JavaScript 上區別不大，遇到的問題通常和時間有關。

JavaScript date 差異

Date 惟一的區別是 getYear 方法。根據 ECMAScript 規范（這是 JavaScript 所遵循的規范），該方法沒有解決千年問題，在 2004 年運行 new Date().getYear() 將返回“104”。根據 ECMAScript 規范，getYear 返回的年份減去 1900 最初是為了在 1998 年返回“98”。ECMAScript Version 3 廢止了 getYear，用 getFullYear() 代替。InterNET Explorer 修改了 getYear() 使其和 getFullYear() 類似，消除了千年問題，而 Mozilla 堅持采用標準的行為方式。

JavaScript 執行差異

不同的瀏覽器執行 JavaScript 的方式是不同的。比如，下列代碼假設 script 塊執行的時候 div 節點已經存在于 DOM 中：

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

但是并不能保證這一點。為了保證所有的元素已經存在，應該對 <body> 元素使用 onload 事件處理程序：

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

這類與時間有關的問題也和硬件有關，速度慢的系統可能會發現速度快的系統隱藏起來的 bug。一個具體的例子是 window.open，它打開新的窗口：

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

這段代碼的問題在于 window.open 是異步的，在窗口打開之前沒有阻塞 JavaScript 的執行。因此，window.open 后面的行有可能在新窗口打開之前執行。可以在新窗口的 onload 處理程序中解決這個問題，然后回調打開它的窗口（使用 window.opener）。

JavaScript 生成 HTML 的差別

JavaScript 可以通過 document.write 即時用字符串生成 HTML。主要的問題在于，如果內嵌在 HTML 文檔（因此也在一個 <script> 標簽中）的 JavaScript 生成的 HTML 又包含 <script> 標簽怎么辦。如果文檔采用 嚴格呈現模式，就會把字符串中的 </script> 解釋成外層 <script> 的結束標簽。下面的代碼很好地說明了這一點：

 <!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> 

由于該頁面采用嚴格模式，Mozilla 解析器就會看到第一個 <script> 并解析它直到發現第一個結束標簽，即第一個 </script> 。這是因為解析器不知道 JavaScript（或者其他任何語言）何時采用嚴格模式。在特殊模式下，解析器在解析的過程中分析 JavaScript（因而降低了速度）。InterNET Explorer 總是采用特殊模式，因此不真正支持 XHTML。為了在 Mozilla 中使用嚴格模式，需要將字符串分解成兩部分：

 <!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> 

調試 JavaScript

Mozilla 提供了多種方法調試為 InterNET Explorer 創建的應用程序中的 JavaScript 相關問題。第一個工具是內置的 JavaScript 控制臺，如圖 1 所示，它記錄了錯誤和警告信息。在 Mozilla 中選擇 Tools -> Web Development -> JavaScript Console，或者在 Firefox（來自 Mozilla 的獨立瀏覽器產品）中選擇 Tools -> JavaScript Console 就能打開它。

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

控制臺還允許對 JavaScript 求值。要計算輸入的 JavaScript 語法，在輸入字段中輸入 1+1 然后按 Evaluate，結果如圖 2 所示。

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

JavaScript 調試器可以調試在 Mozilla 瀏覽器窗口中運行的 JavaScript。它支持斷點管理、查看調用棧和變量/對象檢查這樣的標準調試特性。所有特性都可通過用戶界面或者調試器的交互控制臺來訪問。通過控制臺，可以在和調試的 JavaScript 代碼同一作用域內執行任何 JavaScript。

JavaScript技術：ibm官方資料把應用程序從 Internet Explorer 遷移到 Mozilla第1/2頁，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。