ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla第2/2頁(yè)

更新時(shí)間：2008年04月15日 12:08:48 作者：

使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí)，您遇到過(guò)麻煩嗎？本文討論了將應(yīng)用程序遷移到基于開(kāi)源 Mozilla 瀏覽器上時(shí)的常見(jiàn)問(wèn)題。首先討論跨瀏覽器開(kāi)發(fā)的基本技術(shù)，然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。

CSS 差異

和 Internet Explorer 及其他瀏覽器相比，Mozilla 對(duì)級(jí)聯(lián)樣式表（CSS）的支持是最好的，包括 CSS1、CSS2 的全部和 CSS3 的一部分。

對(duì)于下面提到的多數(shù)問(wèn)題，Mozilla 都會(huì)在 JavaScript 控制臺(tái)中添加錯(cuò)誤或警告記錄。如果遇到和 CSS 有關(guān)的問(wèn)題請(qǐng)檢查 JavaScript 控制臺(tái)。

Mimetypes（如果未應(yīng)用 CSS 文件）

與 CSS 有關(guān)的最常見(jiàn)的問(wèn)題就是：未應(yīng)用所引用的 CSS 文件中的 CSS 定義。這通常是因?yàn)榉?wù)器為 CSS 文件提供了錯(cuò)誤的 mimetype。CSS 規(guī)范指出，CSS 文件的 MIME 類(lèi)型應(yīng)該是 text/css。Mozilla 遵守這一點(diǎn)，在嚴(yán)格標(biāo)準(zhǔn)模式下只有這種 MIME 類(lèi)型的 CSS 文件才會(huì)被加載。Internet Explorer 總是加載 CSS 文件，無(wú)論使用什么 mimetype。如果以嚴(yán)格的文檔類(lèi)型開(kāi)始，則該網(wǎng)頁(yè)被認(rèn)為是嚴(yán)格標(biāo)準(zhǔn)模式。為了解決這個(gè)問(wèn)題，可以讓服務(wù)器發(fā)送正確的 mimetype 或者刪除文檔類(lèi)型。下一節(jié)將進(jìn)一步討論文檔類(lèi)型。

CSS 和單位

很多 Web 應(yīng)用程序沒(méi)有在 CSS 中使用單位，尤其是如果使用 JavaScript 設(shè)置 CSS。Mozilla 允許這樣做，只要頁(yè)面不以嚴(yán)格模式呈現(xiàn)。因?yàn)?Internet Explorer 不支持真正的 XHTML，沒(méi)有指定單位也不必?fù)?dān)心。如果頁(yè)面處于嚴(yán)格標(biāo)準(zhǔn)模式而沒(méi)有使用單位，則 Mozilla 將忽略該樣式：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 <body> 
 // works in strict mode 
 <div style="width:40px; border:1px solid black;">
  Text
 </div>

 // will fail in strict mode 
   <div style="width:40; border:1px solid black;">
     Text
   </div>
 </body> 
</html>

因?yàn)樯厦娴睦邮褂昧藝?yán)格的文檔類(lèi)型，頁(yè)面以嚴(yán)格標(biāo)準(zhǔn)模式呈現(xiàn)。第一個(gè) div 的寬度為 40px，因?yàn)槭褂昧藛挝唬坏堑诙€(gè) div 沒(méi)有設(shè)置寬度，因此使用默認(rèn)值 100%。如果通過(guò) JavaScript 設(shè)置寬度，情況也是一樣。

JavaScript 和 CSS

因?yàn)?Mozilla 支持 CSS 標(biāo)準(zhǔn)，它也支持通過(guò) JavaScript 設(shè)置 CSS 的 CSS DOM 標(biāo)準(zhǔn)?？梢酝ㄟ^(guò)元素的 style 成員訪問(wèn)、刪除和修改元素的 CSS 規(guī)則：

 
<div id="myDiv" border:1px solid black;">
 Text
</div> 

<script> 
 var myElm = document.getElementById("myDiv"); 
 myElm.style.width = "40px"; 
</script>

通過(guò)這種方法可以訪問(wèn)每一個(gè) CSS 屬性。同樣，如果網(wǎng)頁(yè)采用嚴(yán)格模式，就必須設(shè)置單位，否則 Mozilla 將忽略該命令。

在 Mozilla 和 Internet Explorer 中查詢(xún)一個(gè)值，比如說(shuō) .style.width，返回值也包含單位，就是說(shuō)是一個(gè)字符串。可用 parseFloat("40px") 將字符串轉(zhuǎn)換成數(shù)字。

CSS 溢出的區(qū)別

CSS 增加了溢出的概念，允許定義如何處理溢出；比如，如果指定高度的 div 的實(shí)際高度超出的時(shí)候。 height.CSS 標(biāo)準(zhǔn)規(guī)定如果這種情況下沒(méi)有定義溢出行為，則 div 內(nèi)容就會(huì)溢出。但是，Internet Explorer 沒(méi)有遵循這一點(diǎn)，而是擴(kuò)展 div 的高度以便容納其內(nèi)容。下面的例子說(shuō)明了這種差異：

 
<div style="height:100px; border: 1px solid black;"> 
 <div style="height:150px; border: 1px solid red; 
     margin:10px;">
 a
 </div> 
</div>

從圖 4 可以看出，Mozilla 是按照標(biāo)準(zhǔn)規(guī)定處理的。標(biāo)準(zhǔn)規(guī)定，這種情況下內(nèi)層的 div 溢出到底線，因?yàn)閮?nèi)層的內(nèi)容比外層元素還高。如果愿意采用 Internet Explorer 的方式，只要不指定外層元素的高度即可。

圖 4. DIV 溢出

懸停差異

Internet Explorer 的非標(biāo)準(zhǔn) CSS 懸停行為出現(xiàn)在很多 IBM 網(wǎng)站上。Mozilla 中懸停的時(shí)候一般通過(guò)改變文本樣式來(lái)表明自身，但是 Internet Explorer 沒(méi)有這種行為。這是因?yàn)?a:hover CSS 選擇器在 Internet Explorer 中和 <a href="" /> 匹配，但是與 <a name="" /> 不匹配，后者在 HTML 用于建立錨鏈接元素。文本變化是因?yàn)樽髡哂缅^設(shè)置標(biāo)記包圍了該區(qū)域：

 
CSS: 
a:hover {color:green;} 

HTML: 
<a href="foo.com">This should turn green when you hover over it.</a> 

<a name="anchor-name"> 
 This should change color when hovered over, but doesn't 
 in Internet Explorer. 
</a>

Mozilla 正確地遵循了 CSS 規(guī)范，該例中文本的顏色變成綠色。有兩種方法可以讓 Mozilla 的行為和 Internet Explorer 一樣，即懸停的時(shí)候不改變文本顏色：

首先將 CSS 規(guī)則改為 a:link:hover {color:green;}，這樣只有鏈接（帶有 href 屬性）才會(huì)改變顏色。
或者修改標(biāo)記在文本開(kāi)始之前加入 <a />，修改后錨仍然能正常工作。

回頁(yè)首

特殊模式與標(biāo)準(zhǔn)模式

老的瀏覽器如 Internet Explorer 4 在特定情況下會(huì)以所謂的特殊模式呈現(xiàn)。雖然 Mozilla 的目標(biāo)是成為符合標(biāo)準(zhǔn)的瀏覽器，但是提供了三種模式支持帶有這些特異行為的較老的網(wǎng)頁(yè)。頁(yè)面的內(nèi)容和交付決定了 Mozilla 使用哪種模式。Mozilla 在 View -> Page Info（或 Ctrl-i）中列出呈現(xiàn)模式。頁(yè)面選擇哪種模式取決于文檔類(lèi)型。

文檔類(lèi)型（doctypes，即文檔類(lèi)型聲明的縮寫(xiě)）如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

藍(lán)色部分稱(chēng)為公共標(biāo)識(shí)符，綠色的部分稱(chēng)為系統(tǒng)標(biāo)識(shí)符，是一個(gè) URI。

標(biāo)準(zhǔn)模式

標(biāo)準(zhǔn)模式是最嚴(yán)格的呈現(xiàn)模式，根據(jù) W3C HTML 和 CSS 規(guī)范呈現(xiàn)頁(yè)面，不支持任何特異情況。如果滿足下列條件，Mozilla 使用該模式：

如果頁(yè)面以 text/xml mimetype 或者其他 XML 或 XHTML mimetype 發(fā)送
IBM 文檔類(lèi)型之外的任何“DOCTYPE HTML SYSTEM”文檔類(lèi)型（比如 <!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/REC-html40/strict.dtd">）
沒(méi) DTD 的文檔類(lèi)型或未知的文檔類(lèi)型

準(zhǔn)標(biāo)準(zhǔn)模式

Mozilla 引入準(zhǔn)標(biāo)準(zhǔn)模式有一個(gè)原因：CSS 2 中的一部分破壞了基于小圖片在表格中精確布局的設(shè)計(jì)。不是為用戶組成一幅完整的圖片，而是在每個(gè)小圖片后面都帶一段間隙。圖 5 所示的舊的 IBM 主頁(yè)給出了一個(gè)例子。

圖 5. 圖片間隙

除了圖片間隙問(wèn)題外,準(zhǔn)標(biāo)準(zhǔn)模式基本上和標(biāo)準(zhǔn)模式完全相同。這個(gè)問(wèn)題常常出現(xiàn)在符合標(biāo)準(zhǔn)的頁(yè)面上，并造成不正確的顯示。

Mozilla 在下列情況下使用準(zhǔn)標(biāo)準(zhǔn)模式。

任何 “寬松” 文檔類(lèi)型（如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）
IBM 文檔類(lèi)型（<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd">）

請(qǐng)閱讀相關(guān)資料進(jìn)一步了解圖片間隙問(wèn)題。

特殊模式

目前 Web 上到處充斥著不合法的 HTML 標(biāo)記以及依靠瀏覽器的缺陷工作的標(biāo)記。早在老的 Netscape 瀏覽器當(dāng)還是市場(chǎng)領(lǐng)先者的時(shí)候就有這方面缺陷。Internet Explorer 出現(xiàn)時(shí)，為適應(yīng)當(dāng)時(shí)的內(nèi)容而模仿了這些缺陷。隨著新的瀏覽器進(jìn)入市場(chǎng)，原來(lái)的這些缺陷，通常稱(chēng)為特異情況（quirks），為保持向后兼容大部分保留了下來(lái)。Mozilla 在特殊呈現(xiàn)模式中支持很多這樣的特異情況。要注意，由于這些特異情況，頁(yè)面與完全符合標(biāo)準(zhǔn)的情形相比呈現(xiàn)速度更慢。多數(shù)網(wǎng)頁(yè)都用這種模式呈現(xiàn)。

Mozilla 在下面情況下使用特殊模式：

沒(méi)有指定文檔類(lèi)型
文檔類(lèi)型沒(méi)有系統(tǒng)標(biāo)識(shí)符（比如 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）

如果希望進(jìn)一步了解相關(guān)內(nèi)容，請(qǐng)閱讀 List of Quirks 和 List of Doctypes and What Modes They Cause。

回頁(yè)首

事件差異

在事件方面，Mozilla 和 Internet Explorer 幾乎完全不同。Mozilla 事件模型按照 W3C 和 Netscape 模型。在 Internet Explorer 中，如果從事件中調(diào)用一個(gè)函數(shù)，可以通過(guò) window.event 訪問(wèn) event 對(duì)象。Mozilla 把 event 對(duì)象傳遞給事件處理程序。必須通過(guò)參數(shù)把該對(duì)象明確傳遞給調(diào)用的函數(shù)。下面是一個(gè)跨瀏覽器事件處理的例子：

 
<div onclick="handleEvent(event)">Click me!</div> 

<script> 
function handleEvent(aEvent){ 
 // if aEvent is null, means the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
} 
</script>

事件對(duì)象公開(kāi)的屬性和函數(shù)的名稱(chēng)在 Mozilla 和 Internet Explorer 中也常常不同，如表 4 所示。

表 4. Mozilla 和 Internet Explorer 中的事件屬性

Internet Explorer 名稱(chēng)	Mozilla 名稱(chēng)	說(shuō)明
altKey	altKey	布爾屬性，表示事件過(guò)程中是否按下了 alt 鍵。
cancelBubble	stopPropagation()	用于停止事件進(jìn)一步沿樹(shù)上行。
clientX	clientX	事件的 X 坐標(biāo)，相對(duì)于客戶機(jī)。
clientY	clientY	事件的 Y 坐標(biāo)，相對(duì)于客戶機(jī)。
ctrlKey	ctrlKey	布爾屬性，表明事件過(guò)程中是否按下了 Ctrl 鍵。
fromElement	relatedTarget	對(duì)于鼠標(biāo)事件來(lái)說(shuō)，指的是鼠標(biāo)從上移走的那個(gè)元素。
keyCode	keyCode	用于鍵盤(pán)事件，表示所按下的鍵的數(shù)字。對(duì)于鼠標(biāo)事件，其值為 0。
returnValue	preventDefault()	用于防止執(zhí)行事件的默認(rèn)動(dòng)作。
screenX	screenX	事件的 X 坐標(biāo)，相對(duì)于屏幕。
screenX	screenY	事件的 Y 坐標(biāo)，相對(duì)于屏幕。
shiftKey	shiftKey	布爾屬性，表明事件過(guò)程中是否按下了 Shift 鍵。
srcElement	target	事件最初指派到的元素。
toElement	currentTarget	用于鼠標(biāo)事件，鼠標(biāo)移動(dòng)到的當(dāng)前元素。
type	type	返回事件名。

附加事件處理程序

Mozilla 提供了兩種方法通過(guò) JavaScript 附加事件。第一種是所有瀏覽器都具備的，即直接在對(duì)象上設(shè)置 event 屬性。要設(shè)置 click 事件處理程序，可以向該對(duì)象的 onclick 屬性傳遞一個(gè)函數(shù)引用：

 
<div id="myDiv">Click me!</div> 

<script> 

function handleEvent(aEvent){ 
 // if aEvent is null, means the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
} 


function onPageLoad(){ 
 document.getElementById("myDiv").onclick = handleEvent; 
} 

</script>

Mozilla 完全支持向 DOM 節(jié)點(diǎn)附加監(jiān)聽(tīng)器的 W3C 標(biāo)準(zhǔn)方式。使用 addEventListener() 和 removeEventListener() 方法的好處是能夠?qū)ν粋€(gè)事件類(lèi)型添加多個(gè)監(jiān)聽(tīng)器。兩種方法都需要三個(gè)參數(shù)：事件類(lèi)型、函數(shù)引用以及監(jiān)聽(tīng)器是否能夠在捕獲階段捕獲事件的布爾值。如果這個(gè)布爾參數(shù)設(shè)為 false，則只捕獲上行的事件。W3C 事件有三個(gè)階段：捕獲、到達(dá)目標(biāo)和上行。每個(gè)事件對(duì)象都有一個(gè) eventPhase 屬性用數(shù)字表示所處的階段（從 0 開(kāi)始）。每當(dāng)觸發(fā)一個(gè)事件時(shí)，事件都從 DOM 的最外層元素即 DOM 樹(shù)最頂端的元素開(kāi)始。然后沿著到目標(biāo)最近的路徑在 DOM 中下行，稱(chēng)為捕獲階段。事件到達(dá)目標(biāo)的時(shí)候稱(chēng)為目標(biāo)抵達(dá)階段。到達(dá)目標(biāo)后，事件再沿著 DOM 樹(shù)回到最外層的節(jié)點(diǎn)，稱(chēng)為上行（冒泡）。Internet Explorer 的事件模型只有上行階段，因此，只要將第三個(gè)參數(shù)設(shè)置為 false 就能模仿 Internet Explorer 的行為：

 
<div id="myDiv">Click me!</div> 

<script> 

 function handleEvent(aEvent) { 
 // if aEvent is null, it is the Internet Explorer event model, 
 // so get window.event. 
 var myEvent = aEvent ? aEvent : window.event; 
 } 

 function onPageLoad() {
  var element = document.getElementById("myDiv");
 element.addEventListener("click", handleEvent, false); 
 } 
</script>

與設(shè)置屬性相比，addEventListener() 和 removeEventListener() 的優(yōu)點(diǎn)是可以為同一個(gè)事件設(shè)置多個(gè)監(jiān)聽(tīng)器，調(diào)用不同的函數(shù)。因此，刪除事件監(jiān)聽(tīng)器要求傳遞的三個(gè)參數(shù)和添加時(shí)設(shè)定的三個(gè)參數(shù)完全相同。

Mozilla 不支持 Internet Explorer 將“script”標(biāo)簽轉(zhuǎn)變成事件處理程序的方法，后者為“script”增加了 for 和 event 屬性（如表 5 所示）。也不支持 attachEvent 和 detachEvent 方法。相反，應(yīng)該使用 addEventListener 和 removeEventListener 方法。Internet Explorer 不支持 W3C 事件規(guī)范。

表 5. Mozilla 與 Internet Explorer 的事件方法差異

Internet Explorer 方法	Mozilla 方法	說(shuō)明
attachEvent(aEventType, aFunctionReference)	addEventListener(aEventType, aFunctionReference, aUseCapture)	向 DOM 元素添加事件監(jiān)聽(tīng)器。
detachEvent(aEventType, aFunctionReference)	removeEventListener(aEventType, aFunctionReference, aUseCapture)	從 DOM 元素刪除事件監(jiān)聽(tīng)器。

回頁(yè)首

富文本編輯

雖然 Mozilla 自詡為最符合 W3C 標(biāo)準(zhǔn)的瀏覽器，但是如果不存在相關(guān)的 W3C 標(biāo)準(zhǔn)，它也可以支持非標(biāo)準(zhǔn)的功能，如 innerHTML 和富文本編輯。

Mozilla 1.3 實(shí)現(xiàn)了 Internet Explorer 的 designMode 特性，將 HTML 文檔變成了一個(gè)富文本編輯器字段。變成了編輯器之后，就可以通過(guò) execCommand 在文檔上執(zhí)行命令。Mozilla 不支持 Internet Explorer 的 contentEditable 屬性，后者允許編輯任何組件?？梢允褂?iframe 增加富文本編輯器。

富文本差異

Mozilla 支持通過(guò) IFrameElm.contentDocument 訪問(wèn) iframe 文檔對(duì)象的 W3C 標(biāo)準(zhǔn)，而 Internet Explorer 要求通過(guò) document.frames["name"] 訪問(wèn)它，然后再訪問(wèn)最終得到的 document：

 
 function getIFrameDocument(aID){ 
var rv = null; 

// if contentDocument exists, W3C compliant (Mozilla) 
if (document.getElementById(aID).contentDocument){ 
 rv = document.getElementById(aID).contentDocument; 
} else { 
 // IE 
 ?rv = document.frames[aID].document; 
} 

return rv; 
 }

Mozilla 和 Internet Explorer 的另一個(gè)區(qū)別是富文本編輯器所創(chuàng)建的 HTML。Mozilla 默認(rèn)對(duì)生成的標(biāo)記使用 CSS。但是，Mozilla 允許使用 useCSS execCommand 分別改為 true 和 false 來(lái)在 HTML 和 CSS 之間切換。Internet Explorer 總是使用 HTML 標(biāo)記。

 
 Mozilla (CSS): 
<span style="color: blue;">Big Blue</span> 

 Mozilla (HTML): 
<font color="blue">Big Blue</font> 

 Internet Explorer: 
<FONT color="blue">Big Blue</FONT>

下面列出了 Mozilla 支持的 execCommand 命令：

表 6. 富文本編輯命令

命令名	說(shuō)明	參數(shù)
bold	決定所選內(nèi)容是否以粗體顯示。	---
createlink	從選中的文本創(chuàng)建 HTML 鏈接。	鏈接的 URL
delete	刪除所選內(nèi)容。	---
fontname	改變所選文本使用的字體。	使用的字體名（比如 Arial）
fontsize	改變所選文本的字體大小。	使用的字體大小
fontcolor	改變所選文本使用的字體顏色。	使用的顏色
indent	縮進(jìn)光標(biāo)所在的塊。	---
inserthorizontalrule	在鼠標(biāo)位置插入 <hr> 元素。	---
insertimage	在鼠標(biāo)位置插入圖片。	圖片的 URL
insertorderedlist	在當(dāng)前位置插入有序列表（<ol>）元素。	---
insertunorderedlist	在光標(biāo)位置插入無(wú)序列表（<ul>）元素。	---
italic	切換所選內(nèi)容的的斜體屬性。	---
justifycenter	當(dāng)前行居中對(duì)齊。	---
justifyleft	當(dāng)前行左對(duì)齊。	---
justifyright	當(dāng)前行右對(duì)齊。	---
outdent	減少光標(biāo)所在塊的縮進(jìn)。	---
redo	恢復(fù)撤銷(xiāo)的上一個(gè)命令。	---
removeformat	去掉所選內(nèi)容的全部格式。	---
selectall	選擇富文本編輯器中的全部?jī)?nèi)容。	---
strikethrough	切換所選文本的刪除線。	---
subscript	將當(dāng)前選擇的內(nèi)容改為下標(biāo)。	---
superscript	當(dāng)前所選內(nèi)容轉(zhuǎn)化為上標(biāo)。	---
underline	添加或刪除所選文本的下劃線。	---
undo	撤銷(xiāo)上一次執(zhí)行的動(dòng)作。	---
unlink	刪除所選內(nèi)容的鏈接信息。	---
useCSS	在生成的標(biāo)記中使用/不使用 CSS。	布爾值

更多信息請(qǐng)?jiān)L問(wèn) DevEdge。

回頁(yè)首

XML 差異

Mozilla 對(duì) XML 及 XML 相關(guān)技術(shù)提供了強(qiáng)大的支持，如 XSLT 和 Web 服務(wù)。也支持 Internet Explorer 的一些非標(biāo)準(zhǔn)擴(kuò)展，如 XMLHttpRequest。

如何處理 XML

和標(biāo)準(zhǔn) HTML 一樣，Mozilla 也支持 W3C XML DOM 規(guī)范，允許執(zhí)行 XML 文檔大多數(shù)方面的操作。和 Internet Explorer XML DOM 的區(qū)別多數(shù)是由于 Internet Explorer 的非標(biāo)準(zhǔn)行為造成的?？赡茏畛Ｒ?jiàn)的一個(gè)差別就是處理空白文本節(jié)點(diǎn)的方式。生成的 XML 通常在 XML 節(jié)點(diǎn)之間帶有空白。Internet Explorer 在使用 XMLNode.childNodes[] 的時(shí)候不包含這些空白節(jié)點(diǎn)。但是在 Mozilla 中，這些節(jié)點(diǎn)也包含在數(shù)組中。

 
 XML: 
<?xml version="1.0"?> 
<myXMLdoc xmlns:myns="http://myfoo.com"> 
 <myns:foo>bar</myns:foo> 
</myXMLdoc> 

 JavaScript: 
var myXMLDoc = getXMLDocument().documentElement; 
alert(myXMLDoc.childNodes.length);

JavaScript 的第一行加載 XML 文檔并通過(guò)檢索 documentElement 訪問(wèn)根元素（myXMLDoc）。第二行僅僅告訴您子節(jié)點(diǎn)的個(gè)數(shù)。按照 W3C 規(guī)范，相連的空格和新行字符合并為一個(gè)文本節(jié)點(diǎn)。對(duì)于 Mozilla，myXMLdoc 節(jié)點(diǎn)有三個(gè)孩子：包含新行字符和兩個(gè)空格的文本節(jié)點(diǎn)、myns:foo 節(jié)點(diǎn)和包含新行字符的另一個(gè)文本節(jié)點(diǎn)。但是 Internet Explorer 沒(méi)有遵守這一點(diǎn)，上面的代碼將返回“1”，即 myns:foo 節(jié)點(diǎn)。因此要遍歷子節(jié)點(diǎn)和忽略文本節(jié)點(diǎn)，必須區(qū)分出這樣的節(jié)點(diǎn)。

如前所述，每個(gè)節(jié)點(diǎn)都有 nodeType 屬性表示節(jié)點(diǎn)類(lèi)型。比如，元素節(jié)點(diǎn)類(lèi)型是 1，而文檔節(jié)點(diǎn)類(lèi)型是 9。要丟掉文本節(jié)點(diǎn)，必須檢查類(lèi)型 3（文本節(jié)點(diǎn)）和 8（注釋節(jié)點(diǎn)）。

 
 XML: 
<?xml version="1.0"?> ? 
<myXMLdoc xmlns:myns="http://myfoo.com"> 
 <myns:foo>bar</myns:foo> 
</myXMLdoc> ? 

 JavaScript: 
var myXMLDoc = getXMLDocument().documentElement; 
var myChildren = myXMLDoc.childNodes; 
for (var run = 0; run < myChildren.length; run++){ 
 if ( (myChildren[run].nodeType != 3) && 
(myChildren[run].nodeType != 8) ){ 
 // not a text or comment node 
 } 
}

XML 數(shù)據(jù)島

Internet Explorer 有一個(gè)非標(biāo)準(zhǔn)特性稱(chēng)為 XML 數(shù)據(jù)島，它允許使用非標(biāo)準(zhǔn) HTML 標(biāo)簽 <xml> 在 HTML 文檔中嵌入 XML。Mozilla 不支持 XML 數(shù)據(jù)島，將其作為未知的 HTML 標(biāo)簽處理?？梢杂?XHTML 來(lái)實(shí)現(xiàn)同樣的功能，但是由于 Internet Explorer 對(duì) XHTML 的支持很弱，這通常不是一個(gè)好辦法。

一種跨瀏覽器的解決方法是使用 DOM 解析器，它解析包含序列化 XML 文檔的字符串并為解析后的 XML 生成文檔。Mozilla 使用 DOMParser 類(lèi)，它接受序列化字符串并用它創(chuàng)建 XML 文檔。在 Internet Explorer 可用 ActiveX 實(shí)現(xiàn)同樣的功能。新增的 Microsoft.XMLDOM 生成 XML 文檔，并且有一個(gè) loadXML 方法可以接收字符串。比如下面的代碼：

 
 IE XML data island: 
.. 
<xml id="xmldataisland"> 
 <foo>bar</foo> 
</xml> 

 Cross-browser solution: 
var xmlString = "<xml 
id=\"xmldataisland\"><foo>bar</foo></xml>"; 
var myDocument; 
 
if (document.implementation.createDocument){ 
 // Mozilla, create a new DOMParser 
 var parser = new DOMParser(); 
 myDocument = parser.parseFromString(xmlString, "text/xml"); 
} else if (window.ActiveXObject){ 
 // Internet Explorer, create a new XML document using ActiveX 
 // and use loadXML as a DOM parser. 
 myDocument = new ActiveXObject("Microsoft.XMLDOM") 
 myDocument.async="false"; 
 myDocument.loadXML(xmlString); 
}

XML HTTP 請(qǐng)求

Internet Explorer 允許使用 MSXML 的 XMLHTTP 類(lèi)發(fā)送和檢索 XML 文件，該類(lèi)通過(guò) ActiveX 使用 new ActiveXObject("Msxml2.XMLHTTP") 或者 new ActiveXObject("Microsoft.XMLHTTP") 進(jìn)行實(shí)例化。由于不存在完成這一任務(wù)的標(biāo)準(zhǔn)方法，Mozilla 在 JavaScript 全局對(duì)象 XMLHttpRequest 中提供了同等的功能。該對(duì)象默認(rèn)生成異步請(qǐng)求。

使用 new XMLHttpRequest() 實(shí)例化該對(duì)象后，可用 open 方法指定使用的請(qǐng)求類(lèi)型（GET 或 POST）、加載的文件以及是否異步執(zhí)行。如果采用異步調(diào)用，則為 onload 成員提供一個(gè)函數(shù)引用，請(qǐng)求完成的時(shí)候調(diào)用它。

				
					Synchronous request:
				 

 var myXMLHTTPRequest = new XMLHttpRequest(); 
 myXMLHTTPRequest.open("GET", "data.xml", false); 
 myXMLHTTPRequest.send(null); 

 var myXMLDocument = myXMLHTTPRequest.responseXML; 


					Asynchronous request:
				 

 var myXMLHTTPRequest; 

 function 
					xmlLoaded
				() { 
 var myXMLDocument = myXMLHTTPRequest.responseXML; 
 } 

 function loadXML(){ 
 myXMLHTTPRequest = new XMLHttpRequest();

 myXMLHTTPRequest.open("GET", "data.xml", true);

 myXMLHTTPRequest.onload =

 function 
					xmlLoaded
				() { 
 var myXMLDocument = myXMLHTTPRequest.responseXML; 
 } 

 function loadXML(){ 
 myXMLHTTPRequest = new XMLHttpRequest();

 myXMLHTTPRequest.open("GET", "data.xml", true);

 myXMLHTTPRequest.onload = 
					xmlLoaded
				; 

 myXMLHTTPRequest.send(null); 
 }

表 7 列出了 Mozilla XMLHttpRequest 提供的方法和屬性。

表 7. XMLHttpRequest 方法和屬性

名稱(chēng) 說(shuō)明

void abort() 如果請(qǐng)求依然在運(yùn)行則停止它。

string getAllResponseHeaders() 用一個(gè)字符串返回所有的請(qǐng)求頭。

string getResponseHeader(string headerName) 返回指定頭的值。

functionRef onerror 射之后，請(qǐng)求中發(fā)生錯(cuò)誤時(shí)將調(diào)用指定的函數(shù)。

functionRef onload 射之后，請(qǐng)求成功完成并收到響應(yīng)后將調(diào)用引用的函數(shù)。用于異步請(qǐng)求。

void open (string HTTP_Method, string URL)

void open (string HTTP_Method, string URL, boolean async, string userName, string password) 初始化對(duì)指定 URL 的請(qǐng)求，使用 GET 或 POST HTTP 方法。要發(fā)送請(qǐng)求需要在初始化之后調(diào)用 send() 方法。如果 async 是 false，則請(qǐng)求是同步的，否則默認(rèn)使用異步請(qǐng)求。如果需要，可以為給定的 URL 指定用戶名和口令。

int readyState

請(qǐng)求的狀態(tài)?？赡苤蛋ǎ?

0	UNINITIALIZED —— 尚未調(diào)用 open()。
1	LOADING —— 尚未調(diào)用 send()。
2	LOADED —— 調(diào)用了 send()，頭和狀態(tài)可用。
3	INTERACTIVE —— 下載中，responseText 保存下載的部分?jǐn)?shù)據(jù)。
4	COMPLETED —— 全部操作已完成。

string responseText 包含響應(yīng)字符串。

DOMDocument responseXML 包含響應(yīng) DOM Document。

void send(variant body) 發(fā)起請(qǐng)求。如果定義了 body，則作為 POST 請(qǐng)求體發(fā)送。body 可以是 XML 文檔或者序列化 XML 文檔的字符串。

void setRequestHeader (string headerName, string headerValue) 設(shè)置 HTTP 請(qǐng)求頭以便在 HTTP 請(qǐng)求中使用。必須在 open() 之后調(diào)用。

string status HTTP 請(qǐng)求的狀態(tài)碼。

XSLT 差異

Mozilla 支持 XSL Transformations（XSLT）1.0。還允許 JavaScript 執(zhí)行 XSLT 轉(zhuǎn)換和對(duì)文檔運(yùn)行 XPATH。

Mozilla 要求使用 XML mimetype（text/xml 或 application/xml）發(fā)送 XML 和包含樣式表的 XSLT 文件。這也是 XSLT 不能在 Mozilla 而能在 Internet Explorer 中運(yùn)行的主要原因之一。Mozilla 在這方面很?chē)?yán)格。

Internet Explorer 5.0 和 5.5 支持 XSLT 工作草案，后者與最終的 1.0 推薦標(biāo)準(zhǔn)存在根本的區(qū)別。判斷 XSLT 使用哪一個(gè)版本的最簡(jiǎn)單辦法就是查看名稱(chēng)空間。1.0 推薦標(biāo)準(zhǔn)的名稱(chēng)空間是 http://www.w3.org/1999/XSL/Transform，而工作草案的名稱(chēng)空間是 http://www.w3.org/TR/WD-xsl。Internet Explorer 6 為保持向后兼容而支持工作草案，但是 Mozilla 不支持工作草案，僅支持最終推薦標(biāo)準(zhǔn)。

如果 XSLT 需要判斷瀏覽器，可以查詢(xún) “xsl:vendor” 系統(tǒng)屬性。Mozilla 的 XSLT 引擎將報(bào)告 “Transformiix”，Internet Explorer 則返回 “Microsoft”。

 
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'"> 
<!-- Mozilla specific markup --> 
</xsl:if> 
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'"> 
<!-- Internet Explorer specific markup --> 
</xsl:if>

Mozilla 還為 XSLT 提供了 JavaScript 接口，Web 站點(diǎn)可以在內(nèi)存中完成 XSLT 轉(zhuǎn)換?？梢允褂?XSLTProcessor JavaScript 全局對(duì)象完成這項(xiàng)工作。XSLTProcessor 需要加載 XML 和 XSLT 文件，因?yàn)樾枰鼈兊?DOM 文檔。XSLTProcessor 導(dǎo)入的 XSLT 文檔允許修改 XSLT 參數(shù)。XSLTProcessor 可以使用 transformToDocument() 創(chuàng)建標(biāo)準(zhǔn)文檔，或者使用 transformToFragment() 生成文檔片斷，您可輕松地將其添加到其他 DOM 文檔中。下面是一個(gè)例子：

 
var xslStylesheet; 
var xsltProcessor = new XSLTProcessor(); 

// load the xslt file, example1.xsl 
var myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xsl", false); 
myXMLHTTPRequest.send(null); 

// get the XML document and import it 
xslStylesheet = myXMLHTTPRequest.responseXML; 

xsltProcessor.importStylesheet(xslStylesheet); 

// load the xml file, example1.xml 
myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xml", false); 
myXMLHTTPRequest.send(null); 

var xmlSource = myXMLHTTPRequest.responseXML; 

var resultDocument = xsltProcessor.transformToDocument(xmlSource);

創(chuàng)建 XSLTProcessor 后使用 XMLHttpRequest 加載 XSLT 文件。XMLHttpRequest 的 responseXML 成員包含 XSLT 的文件的 XML 文檔，傳遞給 importStylesheet。然后再使用 XMLHttpRequest 打開(kāi)需要轉(zhuǎn)換的源 XML 文檔，將該文檔傳遞給 XSLTProcessor 的 transformToDocument 方法。表 8 列出了 XSLTProcessor 的方法。

表 8. XSLTProcessor 方法

方法	說(shuō)明
void importStylesheet(Node styleSheet)	導(dǎo)入 XSLT 樣式表。`styleSheet` 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點(diǎn)。
DocumentFragment transformToFragment(Node source, Document owner)	應(yīng)用通過(guò) `importStylesheet` 方法導(dǎo)入的樣式表，并生成 DocumentFragment，通過(guò)這種方法來(lái)轉(zhuǎn)換節(jié)點(diǎn) `source`。`owner` 指定了 DocumentFragment 屬于哪個(gè) DOM 文檔，以便添加到相應(yīng)的 DOM 文檔中。
Document transformToDocument(Node source)	應(yīng)用通過(guò) `importStylesheet` 導(dǎo)入的樣式表，并返回一個(gè)獨(dú)立的 DOM 文檔，通過(guò)這種方法來(lái)轉(zhuǎn)換節(jié)點(diǎn) `source`。
void setParameter(String namespaceURI, String localName, Variant value)	設(shè)置導(dǎo)入的 XSLT 樣式表中的參數(shù)。
Variant getParameter(String namespaceURI, String localName)	獲得導(dǎo)入 XSLT 樣式表的參數(shù)值。
void removeParameter(String namespaceURI, String localName)	從導(dǎo)入的 XSLT 樣式表中刪除所有已設(shè)置的參數(shù)，使用 XSLT 定義的默認(rèn)值。
void clearParameters()	刪除所有已設(shè)置的參數(shù)并將其設(shè)置為 XSLT 樣式表的默認(rèn)參數(shù)。
void reset()	刪除所有的參數(shù)和樣式表。

回頁(yè)首

結(jié)束語(yǔ)

本文介紹了 Web 應(yīng)用程序開(kāi)發(fā)人員嘗試使其應(yīng)用程序在基于 Mozilla 的瀏覽器中工作時(shí)面臨的常見(jiàn)問(wèn)題。開(kāi)發(fā) Web 應(yīng)用程序時(shí)，一定要考慮到可能存在的瀏覽器差異并牢記在心。參考資料中提供了兩篇很好的參考資料，深入探討了跨瀏覽器開(kāi)發(fā)問(wèn)題。根據(jù)這些原則開(kāi)發(fā)的 Web 應(yīng)用程序可以在其他瀏覽器乃至其他平臺(tái)上工作。

參考資料

您可以參閱本文在 developerWorks 全球站點(diǎn)上的英文原文。
Dynamic HTML: The Definitive Reference (2nd Edition) 詳細(xì)討論了跨瀏覽器 DHTML 開(kāi)發(fā)的方方面面（O'Reilly & Associates. Inc.，2002 年）。
JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本（1.5），討論了瀏覽器的細(xì)微差別（O'Reilly & Associates, Inc.，2002 年）。
Netscape Devedge 討論了開(kāi)發(fā)人員在使用基于 Mozilla 的瀏覽器的時(shí)候遇到的一些問(wèn)題。糟糕的是，AOL 去年把它從在線書(shū)架上拿了下來(lái)，不過(guò)已經(jīng)存檔。
Mozilla.org 上的 Web 開(kāi)發(fā)文檔為 Web 開(kāi)發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
developerWorks Web 開(kāi)發(fā)專(zhuān)區(qū) 專(zhuān)門(mén)發(fā)表各種基于 Web 的解決方案的文章。
通過(guò)參與 developerWorks blogs 加入 developerWorks 社區(qū)。

關(guān)于作者


		Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項(xiàng)目工作了五年多?？梢酝ㄟ^(guò) doronr@us.ibm.com 聯(lián)系 Doron。

xmlLoaded ; myXMLHTTPRequest.send(null); }

表 7 列出了 Mozilla XMLHttpRequest 提供的方法和屬性。

表 7. XMLHttpRequest 方法和屬性

名稱(chēng) 說(shuō)明

void abort() 如果請(qǐng)求依然在運(yùn)行則停止它。

string getAllResponseHeaders() 用一個(gè)字符串返回所有的請(qǐng)求頭。

string getResponseHeader(string headerName) 返回指定頭的值。

functionRef onerror 射之后，請(qǐng)求中發(fā)生錯(cuò)誤時(shí)將調(diào)用指定的函數(shù)。

functionRef onload 射之后，請(qǐng)求成功完成并收到響應(yīng)后將調(diào)用引用的函數(shù)。用于異步請(qǐng)求。

int readyState

請(qǐng)求的狀態(tài)?？赡苤蛋ǎ?

0	UNINITIALIZED —— 尚未調(diào)用 open()。
1	LOADING —— 尚未調(diào)用 send()。
2	LOADED —— 調(diào)用了 send()，頭和狀態(tài)可用。
3	INTERACTIVE —— 下載中，responseText 保存下載的部分?jǐn)?shù)據(jù)。
4	COMPLETED —— 全部操作已完成。

string responseText 包含響應(yīng)字符串。

DOMDocument responseXML 包含響應(yīng) DOM Document。

void send(variant body) 發(fā)起請(qǐng)求。如果定義了 body，則作為 POST 請(qǐng)求體發(fā)送。body 可以是 XML 文檔或者序列化 XML 文檔的字符串。

void setRequestHeader (string headerName, string headerValue) 設(shè)置 HTTP 請(qǐng)求頭以便在 HTTP 請(qǐng)求中使用。必須在 open() 之后調(diào)用。

string status HTTP 請(qǐng)求的狀態(tài)碼。

XSLT 差異

Mozilla 支持 XSL Transformations（XSLT）1.0。還允許 JavaScript 執(zhí)行 XSLT 轉(zhuǎn)換和對(duì)文檔運(yùn)行 XPATH。

如果 XSLT 需要判斷瀏覽器，可以查詢(xún) “xsl:vendor” 系統(tǒng)屬性。Mozilla 的 XSLT 引擎將報(bào)告 “Transformiix”，Internet Explorer 則返回 “Microsoft”。

 
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'"> 
<!-- Mozilla specific markup --> 
</xsl:if> 
<xsl:if test="system-property('xsl:vendor') = 'Microsoft'"> 
<!-- Internet Explorer specific markup --> 
</xsl:if>

Mozilla 還為 XSLT 提供了 JavaScript 接口，Web 站點(diǎn)可以在內(nèi)存中完成 XSLT 轉(zhuǎn)換。可以使用 XSLTProcessor JavaScript 全局對(duì)象完成這項(xiàng)工作。XSLTProcessor 需要加載 XML 和 XSLT 文件，因?yàn)樾枰鼈兊?DOM 文檔。XSLTProcessor 導(dǎo)入的 XSLT 文檔允許修改 XSLT 參數(shù)。XSLTProcessor 可以使用 transformToDocument() 創(chuàng)建標(biāo)準(zhǔn)文檔，或者使用 transformToFragment() 生成文檔片斷，您可輕松地將其添加到其他 DOM 文檔中。下面是一個(gè)例子：

 
var xslStylesheet; 
var xsltProcessor = new XSLTProcessor(); 

// load the xslt file, example1.xsl 
var myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xsl", false); 
myXMLHTTPRequest.send(null); 

// get the XML document and import it 
xslStylesheet = myXMLHTTPRequest.responseXML; 

xsltProcessor.importStylesheet(xslStylesheet); 

// load the xml file, example1.xml 
myXMLHTTPRequest = new XMLHttpRequest(); 
myXMLHTTPRequest.open("GET", "example1.xml", false); 
myXMLHTTPRequest.send(null); 

var xmlSource = myXMLHTTPRequest.responseXML; 

var resultDocument = xsltProcessor.transformToDocument(xmlSource);

表 8. XSLTProcessor 方法

方法	說(shuō)明
void importStylesheet(Node styleSheet)	導(dǎo)入 XSLT 樣式表。`styleSheet` 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點(diǎn)。
DocumentFragment transformToFragment(Node source, Document owner)	應(yīng)用通過(guò) `importStylesheet` 方法導(dǎo)入的樣式表，并生成 DocumentFragment，通過(guò)這種方法來(lái)轉(zhuǎn)換節(jié)點(diǎn) `source`。`owner` 指定了 DocumentFragment 屬于哪個(gè) DOM 文檔，以便添加到相應(yīng)的 DOM 文檔中。
Document transformToDocument(Node source)	應(yīng)用通過(guò) `importStylesheet` 導(dǎo)入的樣式表，并返回一個(gè)獨(dú)立的 DOM 文檔，通過(guò)這種方法來(lái)轉(zhuǎn)換節(jié)點(diǎn) `source`。
void setParameter(String namespaceURI, String localName, Variant value)	設(shè)置導(dǎo)入的 XSLT 樣式表中的參數(shù)。
Variant getParameter(String namespaceURI, String localName)	獲得導(dǎo)入 XSLT 樣式表的參數(shù)值。
void removeParameter(String namespaceURI, String localName)	從導(dǎo)入的 XSLT 樣式表中刪除所有已設(shè)置的參數(shù)，使用 XSLT 定義的默認(rèn)值。
void clearParameters()	刪除所有已設(shè)置的參數(shù)并將其設(shè)置為 XSLT 樣式表的默認(rèn)參數(shù)。
void reset()	刪除所有的參數(shù)和樣式表。

回頁(yè)首

結(jié)束語(yǔ)

參考資料

您可以參閱本文在 developerWorks 全球站點(diǎn)上的英文原文。
Dynamic HTML: The Definitive Reference (2nd Edition) 詳細(xì)討論了跨瀏覽器 DHTML 開(kāi)發(fā)的方方面面（O'Reilly & Associates. Inc.，2002 年）。
JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本（1.5），討論了瀏覽器的細(xì)微差別（O'Reilly & Associates, Inc.，2002 年）。
Netscape Devedge 討論了開(kāi)發(fā)人員在使用基于 Mozilla 的瀏覽器的時(shí)候遇到的一些問(wèn)題。糟糕的是，AOL 去年把它從在線書(shū)架上拿了下來(lái)，不過(guò)已經(jīng)存檔。
Mozilla.org 上的 Web 開(kāi)發(fā)文檔為 Web 開(kāi)發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
developerWorks Web 開(kāi)發(fā)專(zhuān)區(qū) 專(zhuān)門(mén)發(fā)表各種基于 Web 的解決方案的文章。
通過(guò)參與 developerWorks blogs 加入 developerWorks 社區(qū)。

關(guān)于作者


		Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項(xiàng)目工作了五年多?？梢酝ㄟ^(guò) doronr@us.ibm.com 聯(lián)系 Doron。

上一頁(yè)12閱讀全文