ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
和 Internet Explorer 及其他瀏覽器相比,Mozilla 對(duì)級(jí)聯(lián)樣式表(CSS)的支持是最好的,包括 CSS1、CSS2 的全部和 CSS3 的一部分。
對(duì)于下面提到的多數(shù)問題,Mozilla 都會(huì)在 JavaScript 控制臺(tái)中添加錯(cuò)誤或警告記錄。如果遇到和 CSS 有關(guān)的問題請(qǐng)檢查 JavaScript 控制臺(tái)。
與 CSS 有關(guān)的最常見的問題就是:未應(yīng)用所引用的 CSS 文件中的 CSS 定義。這通常是因?yàn)榉?wù)器為 CSS 文件提供了錯(cuò)誤的 mimetype。CSS 規(guī)范指出,CSS 文件的 MIME 類型應(yīng)該是 text/css
。Mozilla 遵守這一點(diǎn),在嚴(yán)格標(biāo)準(zhǔn)模式下只有這種 MIME 類型的 CSS 文件才會(huì)被加載。Internet Explorer 總是加載 CSS 文件,無論使用什么 mimetype。如果以嚴(yán)格的文檔類型開始,則該網(wǎng)頁被認(rèn)為是嚴(yán)格標(biāo)準(zhǔn)模式。為了解決這個(gè)問題,可以讓服務(wù)器發(fā)送正確的 mimetype 或者刪除文檔類型。下一節(jié)將進(jìn)一步討論文檔類型。
很多 Web 應(yīng)用程序沒有在 CSS 中使用單位,尤其是如果使用 JavaScript 設(shè)置 CSS。Mozilla 允許這樣做,只要頁面不以嚴(yán)格模式呈現(xiàn)。因?yàn)?Internet Explorer 不支持真正的 XHTML,沒有指定單位也不必?fù)?dān)心。如果頁面處于嚴(yán)格標(biāo)準(zhǔn)模式而沒有使用單位,則 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)格的文檔類型,頁面以嚴(yán)格標(biāo)準(zhǔn)模式呈現(xiàn)。第一個(gè) div 的寬度為 40px,因?yàn)槭褂昧藛挝?;但是第二個(gè) div 沒有設(shè)置寬度,因此使用默認(rèn)值 100%。如果通過 JavaScript 設(shè)置寬度,情況也是一樣。
因?yàn)?Mozilla 支持 CSS 標(biāo)準(zhǔn),它也支持通過 JavaScript 設(shè)置 CSS 的 CSS DOM 標(biāo)準(zhǔn)??梢酝ㄟ^元素的 style
成員訪問、刪除和修改元素的 CSS 規(guī)則:
<div id="myDiv" border:1px solid black;"> Text </div> <script> var myElm = document.getElementById("myDiv"); myElm.style.width = "40px"; </script> |
通過這種方法可以訪問每一個(gè) CSS 屬性。同樣,如果網(wǎng)頁采用嚴(yán)格模式,就必須設(shè)置單位,否則 Mozilla 將忽略該命令。
在 Mozilla 和 Internet Explorer 中查詢一個(gè)值,比如說 .style.width
,返回值也包含單位,就是說是一個(gè)字符串??捎?parseFloat("40px")
將字符串轉(zhuǎn)換成數(shù)字。
CSS 增加了溢出的概念,允許定義如何處理溢出;比如,如果指定高度的 div
的實(shí)際高度超出的時(shí)候。 height.CSS 標(biāo)準(zhǔn)規(guī)定如果這種情況下沒有定義溢出行為,則 div
內(nèi)容就會(huì)溢出。但是,Internet Explorer 沒有遵循這一點(diǎn),而是擴(kuò)展 div
的高度以便容納其內(nèi)容。下面的例子說明了這種差異:
<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í)候一般通過改變文本樣式來表明自身,但是 Internet Explorer 沒有這種行為。這是因?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)記在文本開始之前加入
<a />
,修改后錨仍然能正常工作。
![]() ![]() |
![]()
|
老的瀏覽器如 Internet Explorer 4 在特定情況下會(huì)以所謂的特殊模式呈現(xiàn)。雖然 Mozilla 的目標(biāo)是成為符合標(biāo)準(zhǔn)的瀏覽器,但是提供了三種模式支持帶有這些特異行為的較老的網(wǎng)頁。頁面的內(nèi)容和交付決定了 Mozilla 使用哪種模式。Mozilla 在 View -> Page Info(或 Ctrl-i)中列出呈現(xiàn)模式。頁面選擇哪種模式取決于文檔類型。
文檔類型(doctypes,即文檔類型聲明的縮寫)如下所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
藍(lán)色部分稱為公共標(biāo)識(shí)符,綠色的部分稱為系統(tǒng)標(biāo)識(shí)符,是一個(gè) URI。
標(biāo)準(zhǔn)模式是最嚴(yán)格的呈現(xiàn)模式,根據(jù) W3C HTML 和 CSS 規(guī)范呈現(xiàn)頁面,不支持任何特異情況。如果滿足下列條件,Mozilla 使用該模式:
- 如果頁面以
text/xml
mimetype 或者其他 XML 或 XHTML mimetype 發(fā)送 - IBM 文檔類型之外的任何“DOCTYPE HTML SYSTEM”文檔類型(比如
<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/REC-html40/strict.dtd">
) - 沒 DTD 的文檔類型或未知的文檔類型
Mozilla 引入準(zhǔn)標(biāo)準(zhǔn)模式有一個(gè)原因:CSS 2 中的一部分破壞了基于小圖片在表格中精確布局的設(shè)計(jì)。不是為用戶組成一幅完整的圖片,而是在每個(gè)小圖片后面都帶一段間隙。圖 5 所示的舊的 IBM 主頁給出了一個(gè)例子。
圖 5. 圖片間隙

除了圖片間隙問題外,準(zhǔn)標(biāo)準(zhǔn)模式基本上和標(biāo)準(zhǔn)模式完全相同。這個(gè)問題常常出現(xiàn)在符合標(biāo)準(zhǔn)的頁面上,并造成不正確的顯示。
Mozilla 在下列情況下使用準(zhǔn)標(biāo)準(zhǔn)模式。
- 任何 “寬松” 文檔類型(如
<!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 文檔類型(
<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd">
)
請(qǐng)閱讀相關(guān)資料進(jìn)一步了解 圖片間隙問題。
目前 Web 上到處充斥著不合法的 HTML 標(biāo)記以及依靠瀏覽器的缺陷工作的標(biāo)記。早在老的 Netscape 瀏覽器當(dāng)還是市場領(lǐng)先者的時(shí)候就有這方面缺陷。Internet Explorer 出現(xiàn)時(shí),為適應(yīng)當(dāng)時(shí)的內(nèi)容而模仿了這些缺陷。隨著新的瀏覽器進(jìn)入市場,原來的這些缺陷,通常稱為特異情況(quirks),為保持向后兼容大部分保留了下來。Mozilla 在特殊呈現(xiàn)模式中支持很多這樣的特異情況。要注意,由于這些特異情況,頁面與完全符合標(biāo)準(zhǔn)的情形相比呈現(xiàn)速度更慢。多數(shù)網(wǎng)頁都用這種模式呈現(xiàn)。
Mozilla 在下面情況下使用特殊模式:
- 沒有指定文檔類型
- 文檔類型沒有系統(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。
![]() ![]() |
![]()
|
在事件方面,Mozilla 和 Internet Explorer 幾乎完全不同。Mozilla 事件模型按照 W3C 和 Netscape 模型。在 Internet Explorer 中,如果從事件中調(diào)用一個(gè)函數(shù),可以通過 window.event
訪問 event
對(duì)象。Mozilla 把 event
對(duì)象傳遞給事件處理程序。必須通過參數(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ì)象公開的屬性和函數(shù)的名稱在 Mozilla 和 Internet Explorer 中也常常不同,如表 4 所示。
表 4. Mozilla 和 Internet Explorer 中的事件屬性
Internet Explorer 名稱 | Mozilla 名稱 | 說明 |
altKey | altKey | 布爾屬性,表示事件過程中是否按下了 alt 鍵。 |
cancelBubble | stopPropagation() | 用于停止事件進(jìn)一步沿樹上行。 |
clientX | clientX | 事件的 X 坐標(biāo),相對(duì)于客戶機(jī)。 |
clientY | clientY | 事件的 Y 坐標(biāo),相對(duì)于客戶機(jī)。 |
ctrlKey | ctrlKey | 布爾屬性,表明事件過程中是否按下了 Ctrl 鍵。 |
fromElement | relatedTarget | 對(duì)于鼠標(biāo)事件來說,指的是鼠標(biāo)從上移走的那個(gè)元素。 |
keyCode | keyCode | 用于鍵盤事件,表示所按下的鍵的數(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 | 布爾屬性,表明事件過程中是否按下了 Shift 鍵。 |
srcElement | target | 事件最初指派到的元素。 |
toElement | currentTarget | 用于鼠標(biāo)事件,鼠標(biāo)移動(dòng)到的當(dāng)前元素。 |
type | type | 返回事件名。 |
Mozilla 提供了兩種方法通過 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)聽器的 W3C 標(biāo)準(zhǔn)方式。使用 addEventListener()
和 removeEventListener()
方法的好處是能夠?qū)ν粋€(gè)事件類型添加多個(gè)監(jiān)聽器。兩種方法都需要三個(gè)參數(shù):事件類型、函數(shù)引用以及監(jiān)聽器是否能夠在捕獲階段捕獲事件的布爾值。如果這個(gè)布爾參數(shù)設(shè)為 false,則只捕獲上行的事件。W3C 事件有三個(gè)階段:捕獲、到達(dá)目標(biāo)和上行。每個(gè)事件對(duì)象都有一個(gè) eventPhase
屬性用數(shù)字表示所處的階段(從 0 開始)。每當(dāng)觸發(fā)一個(gè)事件時(shí),事件都從 DOM 的最外層元素即 DOM 樹最頂端的元素開始。然后沿著到目標(biāo)最近的路徑在 DOM 中下行,稱為捕獲階段。事件到達(dá)目標(biāo)的時(shí)候稱為目標(biāo)抵達(dá)階段。到達(dá)目標(biāo)后,事件再沿著 DOM 樹回到最外層的節(jié)點(diǎn),稱為上行(冒泡)。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)聽器,調(diào)用不同的函數(shù)。因此,刪除事件監(jiān)聽器要求傳遞的三個(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 方法 | 說明 |
attachEvent(aEventType, aFunctionReference) | addEventListener(aEventType, aFunctionReference, aUseCapture) | 向 DOM 元素添加事件監(jiān)聽器。 |
detachEvent(aEventType, aFunctionReference) | removeEventListener(aEventType, aFunctionReference, aUseCapture) | 從 DOM 元素刪除事件監(jiān)聽器。 |
![]() ![]() |
![]()
|
雖然 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è)富文本編輯器字段。變成了編輯器之后,就可以通過 execCommand
在文檔上執(zhí)行命令。Mozilla 不支持 Internet Explorer 的 contentEditable
屬性,后者允許編輯任何組件??梢允褂?iframe 增加富文本編輯器。
Mozilla 支持通過 IFrameElm.contentDocument
訪問 iframe 文檔對(duì)象的 W3C 標(biāo)準(zhǔn),而 Internet Explorer 要求通過 document.frames["name"]
訪問它,然后再訪問最終得到的 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 來在 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. 富文本編輯命令
命令名 | 說明 | 參數(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)位置插入無序列表(<ul>)元素。 | --- |
italic | 切換所選內(nèi)容的的斜體屬性。 | --- |
justifycenter | 當(dāng)前行居中對(duì)齊。 | --- |
justifyleft | 當(dāng)前行左對(duì)齊。 | --- |
justifyright | 當(dāng)前行右對(duì)齊。 | --- |
outdent | 減少光標(biāo)所在塊的縮進(jìn)。 | --- |
redo | 恢復(fù)撤銷的上一個(gè)命令。 | --- |
removeformat | 去掉所選內(nèi)容的全部格式。 | --- |
selectall | 選擇富文本編輯器中的全部內(nèi)容。 | --- |
strikethrough | 切換所選文本的刪除線。 | --- |
subscript | 將當(dāng)前選擇的內(nèi)容改為下標(biāo)。 | --- |
superscript | 當(dāng)前所選內(nèi)容轉(zhuǎn)化為上標(biāo)。 | --- |
underline | 添加或刪除所選文本的下劃線。 | --- |
undo | 撤銷上一次執(zhí)行的動(dòng)作。 | --- |
unlink | 刪除所選內(nèi)容的鏈接信息。 | --- |
useCSS | 在生成的標(biāo)記中使用/不使用 CSS。 | 布爾值 |
更多信息請(qǐng)?jiān)L問 DevEdge。
![]() ![]() |
![]()
|
Mozilla 對(duì) XML 及 XML 相關(guān)技術(shù)提供了強(qiáng)大的支持,如 XSLT 和 Web 服務(wù)。也支持 Internet Explorer 的一些非標(biāo)準(zhǔn)擴(kuò)展,如 XMLHttpRequest。
和標(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)行為造成的。可能最常見的一個(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 文檔并通過檢索 documentElement
訪問根元素(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 沒有遵守這一點(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)類型。比如,元素節(jié)點(diǎn)類型是 1,而文檔節(jié)點(diǎn)類型是 9。要丟掉文本節(jié)點(diǎn),必須檢查類型 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 } } |
Internet Explorer 有一個(gè)非標(biāo)準(zhǔn)特性稱為 XML 數(shù)據(jù)島,它允許使用非標(biāo)準(zhǔn) HTML 標(biāo)簽 <xml>
在 HTML 文檔中嵌入 XML。Mozilla 不支持 XML 數(shù)據(jù)島,將其作為未知的 HTML 標(biāo)簽處理。可以用 XHTML 來實(shí)現(xiàn)同樣的功能,但是由于 Internet Explorer 對(duì) XHTML 的支持很弱,這通常不是一個(gè)好辦法。
一種跨瀏覽器的解決方法是使用 DOM 解析器,它解析包含序列化 XML 文檔的字符串并為解析后的 XML 生成文檔。Mozilla 使用 DOMParser
類,它接受序列化字符串并用它創(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); } |
Internet Explorer 允許使用 MSXML 的 XMLHTTP
類發(fā)送和檢索 XML 文件,該類通過 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)求類型(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 方法和屬性
名稱 | 說明 | ||||||||||
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)??赡苤蛋ǎ?
| ||||||||||
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)碼。 |
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 在這方面很嚴(yán)格。
Internet Explorer 5.0 和 5.5 支持 XSLT 工作草案,后者與最終的 1.0 推薦標(biāo)準(zhǔn)存在根本的區(qū)別。判斷 XSLT 使用哪一個(gè)版本的最簡單辦法就是查看名稱空間。1.0 推薦標(biāo)準(zhǔn)的名稱空間是 http://www.w3.org/1999/XSL/Transform
,而工作草案的名稱空間是 http://www.w3.org/TR/WD-xsl
。Internet Explorer 6 為保持向后兼容而支持工作草案,但是 Mozilla 不支持工作草案,僅支持最終推薦標(biāo)準(zhǔn)。
如果 XSLT 需要判斷瀏覽器,可以查詢 “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
打開需要轉(zhuǎn)換的源 XML 文檔,將該文檔傳遞給 XSLTProcessor
的 transformToDocument
方法。表 8 列出了 XSLTProcessor
的方法。
表 8. XSLTProcessor 方法
方法 | 說明 |
void importStylesheet(Node styleSheet) | 導(dǎo)入 XSLT 樣式表。styleSheet 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點(diǎn)。 |
DocumentFragment transformToFragment(Node source, Document owner) | 應(yīng)用通過 importStylesheet 方法導(dǎo)入的樣式表,并生成 DocumentFragment,通過這種方法來轉(zhuǎn)換節(jié)點(diǎn) source 。owner 指定了 DocumentFragment 屬于哪個(gè) DOM 文檔,以便添加到相應(yīng)的 DOM 文檔中。 |
Document transformToDocument(Node source) | 應(yīng)用通過 importStylesheet 導(dǎo)入的樣式表,并返回一個(gè)獨(dú)立的 DOM 文檔,通過這種方法來轉(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ù)和樣式表。 |
![]() ![]() |
![]()
|
本文介紹了 Web 應(yīng)用程序開發(fā)人員嘗試使其應(yīng)用程序在基于 Mozilla 的瀏覽器中工作時(shí)面臨的常見問題。開發(fā) Web 應(yīng)用程序時(shí),一定要考慮到可能存在的瀏覽器差異并牢記在心。參考資料 中提供了兩篇很好的參考資料,深入探討了跨瀏覽器開發(fā)問題。根據(jù)這些原則開發(fā)的 Web 應(yīng)用程序可以在其他瀏覽器乃至其他平臺(tái)上工作。
- 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 。
- Dynamic HTML: The Definitive Reference (2nd Edition) 詳細(xì)討論了跨瀏覽器 DHTML 開發(fā)的方方面面(O'Reilly & Associates. Inc.,2002 年)。
- JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本(1.5),討論了瀏覽器的細(xì)微差別(O'Reilly & Associates, Inc.,2002 年)。
- Netscape Devedge 討論了開發(fā)人員在使用基于 Mozilla 的瀏覽器的時(shí)候遇到的一些問題。糟糕的是,AOL 去年把它從在線書架上拿了下來,不過已經(jīng)存檔。
- Mozilla.org 上的 Web 開發(fā)文檔為 Web 開發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
- developerWorks Web 開發(fā)專區(qū) 專門發(fā)表各種基于 Web 的解決方案的文章。
- 通過參與 developerWorks blogs 加入 developerWorks 社區(qū)。
![]() | ||
![]() |
Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項(xiàng)目工作了五年多??梢酝ㄟ^ doronr@us.ibm.com 聯(lián)系 Doron。 |
表 7 列出了 Mozilla XMLHttpRequest
提供的方法和屬性。
表 7. XMLHttpRequest 方法和屬性
名稱 | 說明 | ||||||||||
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)??赡苤蛋ǎ?
| ||||||||||
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)碼。 |
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 在這方面很嚴(yán)格。
Internet Explorer 5.0 和 5.5 支持 XSLT 工作草案,后者與最終的 1.0 推薦標(biāo)準(zhǔn)存在根本的區(qū)別。判斷 XSLT 使用哪一個(gè)版本的最簡單辦法就是查看名稱空間。1.0 推薦標(biāo)準(zhǔn)的名稱空間是 http://www.w3.org/1999/XSL/Transform
,而工作草案的名稱空間是 http://www.w3.org/TR/WD-xsl
。Internet Explorer 6 為保持向后兼容而支持工作草案,但是 Mozilla 不支持工作草案,僅支持最終推薦標(biāo)準(zhǔn)。
如果 XSLT 需要判斷瀏覽器,可以查詢 “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
打開需要轉(zhuǎn)換的源 XML 文檔,將該文檔傳遞給 XSLTProcessor
的 transformToDocument
方法。表 8 列出了 XSLTProcessor
的方法。
表 8. XSLTProcessor 方法
方法 | 說明 |
void importStylesheet(Node styleSheet) | 導(dǎo)入 XSLT 樣式表。styleSheet 參數(shù)是 XSLT 樣式表 DOM 文檔的根節(jié)點(diǎn)。 |
DocumentFragment transformToFragment(Node source, Document owner) | 應(yīng)用通過 importStylesheet 方法導(dǎo)入的樣式表,并生成 DocumentFragment,通過這種方法來轉(zhuǎn)換節(jié)點(diǎn) source 。owner 指定了 DocumentFragment 屬于哪個(gè) DOM 文檔,以便添加到相應(yīng)的 DOM 文檔中。 |
Document transformToDocument(Node source) | 應(yīng)用通過 importStylesheet 導(dǎo)入的樣式表,并返回一個(gè)獨(dú)立的 DOM 文檔,通過這種方法來轉(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ù)和樣式表。 |
![]() ![]() |
![]()
|
本文介紹了 Web 應(yīng)用程序開發(fā)人員嘗試使其應(yīng)用程序在基于 Mozilla 的瀏覽器中工作時(shí)面臨的常見問題。開發(fā) Web 應(yīng)用程序時(shí),一定要考慮到可能存在的瀏覽器差異并牢記在心。參考資料 中提供了兩篇很好的參考資料,深入探討了跨瀏覽器開發(fā)問題。根據(jù)這些原則開發(fā)的 Web 應(yīng)用程序可以在其他瀏覽器乃至其他平臺(tái)上工作。
- 您可以參閱本文在 developerWorks 全球站點(diǎn)上的 英文原文 。
- Dynamic HTML: The Definitive Reference (2nd Edition) 詳細(xì)討論了跨瀏覽器 DHTML 開發(fā)的方方面面(O'Reilly & Associates. Inc.,2002 年)。
- JavaScript: The Definitive Guide (4th Edition) 介紹了 JavaScript 的最新版本(1.5),討論了瀏覽器的細(xì)微差別(O'Reilly & Associates, Inc.,2002 年)。
- Netscape Devedge 討論了開發(fā)人員在使用基于 Mozilla 的瀏覽器的時(shí)候遇到的一些問題。糟糕的是,AOL 去年把它從在線書架上拿了下來,不過已經(jīng)存檔。
- Mozilla.org 上的 Web 開發(fā)文檔為 Web 開發(fā)人員提供了關(guān)于 Mozilla 的很好的信息。
- developerWorks Web 開發(fā)專區(qū) 專門發(fā)表各種基于 Web 的解決方案的文章。
- 通過參與 developerWorks blogs 加入 developerWorks 社區(qū)。
![]() | ||
![]() |
Doron Rosenberg 在加入 IBM Browser Development Center 之前效力于 Netscape。他為 Mozilla 項(xiàng)目工作了五年多??梢酝ㄟ^ doronr@us.ibm.com 聯(lián)系 Doron。 |
相關(guān)文章
JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用詳解
這篇文章主要介紹了JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用,localStorage:永久存儲(chǔ)在本地,適合保存在本地的數(shù)據(jù)。sessionStorage:會(huì)話級(jí)的存儲(chǔ),敏感帳號(hào)一次登陸2022-10-10ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例
這篇文章主要為大家詳細(xì)介紹了ionic組件ion-tabs選項(xiàng)卡切換效果實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試詳解
這篇文章主要介紹了對(duì)于防止按鈕重復(fù)點(diǎn)擊的嘗試,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果,涉及javascript事件響應(yīng)、數(shù)值運(yùn)算及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05微信小程序?qū)崿F(xiàn)點(diǎn)擊返回頂層的方法
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊返回頂層的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07用IE重起計(jì)算機(jī)或者關(guān)機(jī)的示例代碼
本篇文章主要是對(duì)用IE重起計(jì)算機(jī)或者關(guān)機(jī)的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法
這篇文章主要介紹了Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06