IE和FF下的相容性問題

長久以來JavaScript相容性一直是Web開發者的一個主要問題。在正式規範、事實标準以及各種實作之間的存在的差異讓許多開發者日夜煎熬。為此，主要從以下幾方面差異總結IE和Firefox的Javascript相容性:

　　一、函數和方法差異；

　　二、樣式通路和設定；

　　三、DOM方法及對象引用；

　　四、事件處理；

　　五、其他差異的相容處理。

一、函數和方法差異

1. getYear()方法

【分析說明】先看一下以下代碼：

var year=  new Date().getYear();

document.write(year);

　　在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因為在 Firefox 裡面 getYear 傳回的是 "目前年份-1900" 的值。

【相容處理】

　　加上對年份的判斷，如:

var year=  new Date().getYear();

year = (year<1900?(1900+year):year); document.write(year);

　　也可以通過 getFullYear getUTCFullYear 去調用:

var year =  new Date().getFullYear();

document.write(year);

2. eval()函數

【分析說明】在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下隻能使用getElementById("idName")來取得id為idName的HTML對象。

【相容處理】統一用getElementById("idName")來取得id為idName的HTML對象。

3. const聲明

【分析說明】在 IE 中不能使用 const 關鍵字。如：

const constVar = 32;

在IE中這是文法錯誤。

【相容處理】不使用 const ，以 var 代替。

4. var

【分析說明】請看以下代碼：

echo= function(str){

document.write(str);

}

　　這個函數在IE上運作正常，Firefox下卻報錯了。

【相容處理】而在echo前加上var就正常了，這個就是我們提到var的目的。

5. const 問題

【分析說明】在 IE 中不能使用 const 關鍵字。如 const constVar = 32; 在IE中這是文法錯誤。

【解決方法】不使用 const ，以 var 代替。

二、樣式通路和設定

1. CSS的"float"屬性

【分析說明】Javascript通路一個給定CSS 值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同浏覽器寫法不同。

在IE中這樣寫：

document.getElementById("header").style.styleFloat = "left";

在Firefox中這樣寫：

document.getElementById("header").style.cssFloat = "left";

【相容處理】在寫之前加一個判斷，判斷浏覽器是否是IE：

if(document.all){ 　　document.getElementById("header").style.styleFloat = "left"; }

else{ 　　document.getElementById("header").style.cssFloat = "left"; }

2. 通路<label>标簽中的"for"

【分析說明】和"float"屬性一樣，同樣需要使用不現的句法區分來通路<label>标簽中的"for"。

在IE中這樣寫：

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中這樣寫：

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("for");

【相容處理】解決的方法也是先 判斷浏覽器類型。

3. 通路和設定class屬性

【分析說明】同樣由于class是Javascript保留字的原因，這兩種浏覽器使用不同的 JavaScript 方法來擷取這個屬性。

IE8.0之前的所有IE版本的寫法：

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("className");

适用于IE8.0 以及 firefox的寫法：

var myObject = document.getElementById("header");

var myAttribute = myObject.getAttribute("class");

　　另外，在使用setAttribute()設定Class屬性的時候，兩種浏覽器也存在同樣的差異。

　　setAttribute("className",value);

　　這種寫法适用于IE8.0之前的所有IE版本，注意：IE8.0也不支援"className"屬性了。

　　setAttribute("class",value);适用于IE8.0 以及 firefox。

【相容處理】

方法一，兩種都寫上：

var myObject = document.getElementById("header");

myObject.setAttribute("class","classValue");

myObject.setAttribute("className","classValue");   // 設定header的class為classValue

方法二，IE和FF都支援object.className，是以可以這樣寫：

var myObject = document.getElementById("header");

myObject.className="classValue"; // 設定header的class為classValue

方法三，先判斷浏覽器類型，再根據浏覽器類型采用對應的寫法。

4. 對象寬高指派問題

【分析說明】FireFox中類似 obj.style.height = imgObj.height 的語句無效。

【相容處理】統一使用 obj.style.height = imgObj.height + ‘px’;

5.添加樣式

【分析說明】IE中使用addRules()方法添加樣式，如：styleSheet.addRule("p","color:#ccc",styleSheet.length).而該方法不相容FF，在FF使用insetRule()方法替換。如styleSheet.insertRule("p{color:#ccc}",styleSheet.length).

【相容處理】if(styleSheet.insertRule){

　　　　　　　　//insertRule()方法

　　　　　　}else{

　　　　　　　　//addRule()方法

　　　　　　}

6.最終樣式

【分析說明】有時候我們自定義的樣式會失效，是因為發生了樣式的重疊，如一個類選擇符定義的樣式和一個标簽選擇符定義的樣式，此時後者失效。則此時需要用到最終樣式了。IE中最終樣式的寫法是ele.currentStyle.屬性名。DOM中标準寫法是利用document.defaultView對象，如document.defaultView.getComputedStyle(elel,null),該方法相容FF.

【相容處理】先判斷浏覽器(document.all)，再執行上面的方法.

三、DOM方法及對象引用

1. getElementById

【分析說明】先來看一組代碼：

<!--  input對象通路1  -->

< input  id ="id"   type ="button"  

value ="click me"  ōnclick ="alert(id.value)"/ >

　　在Firefox中，按鈕沒反應，在IE中，就可以，因為對于IE來說，一個HTML 元素的 ID 可以直接在腳本中當作變量名來使用，而Firefox中不可以。

【相容處理】盡量采用W3C DOM 的寫法，通路對象的時候，用document.getElementById("id") 以ID來通路對象，且一個ID在頁面中必須是唯一的，同樣在以标簽名來通路對象的時候，用document.getElementsByTagName("div")[0] 。該方式得到較多浏覽器的支援。

<!--  input對象通路2  -->

< input  id ="id"   type ="button"  value ="click me"    onclick ="alert(document.getElementById('id').value)" / >

2. 集合類對象通路

【分析說明】IE下，可以使用()或[]擷取集合類對象；Firefox下，隻能使用[]擷取集合類對象。如：

document.write(document.forms("formName").src); //該寫法在IE下能通路到Form對象的scrc屬性

 【相容處理】将document.forms("formName")改為 document.forms["formName"]。統一使用[]擷取集合類對象。

3. frame的引用

【分析說明】IE可以通過id或者name通路這個frame對應的window對象，而Firefox隻可以通過name來通路這個frame對應的window對象。

　　例如如果上述frame标簽寫在最上層的window裡面的htm裡面，那麼可以這樣通路：

IE： window.top.frameId或者window.top.frameName來通路這個window對象；

Firefox：隻能這樣window.top.frameName來通路這個window對象。

【相容處理】使用frame的name來通路frame對象，另外，在IE和Firefox中都可以使用window.document.getElementById(”frameId”)來通路這個frame對象。

4. parentElement

【分析說明】IE中支援使用parentElement和parentNode擷取父節點。而Firefox隻可以使用parentNode。 

【相容處理】因為firefox與IE都支援DOM，是以統一使用parentNode來通路父節點。

5. table操作

【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他浏覽器卻顯示正常。

【相容處理】解決的方法是，将<tr>加到table的<tbody>元素中，如下面所示：

var row = document.createElement("tr");

var cell = document.createElement("td");

var cell_text = document.createTextNode("插入的内容");

cell.appendChild(cell_text);

row.appendChild(cell);

document.getElementsByTagName("tbody")[0].appendChild(row);

6. 移除節點removeNode()和removeChild()

【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode隻能在IE下用。

　　removeNode方法的功能是删除一個節點，文法為node.removeNode（false）或者node.removeNode（true），傳回值是被删除的節點。

　　removeNode（false）表示僅僅删除指定節點，然後這個節點的原孩子節點提升為原雙親節點的孩子節點。

　　removeNode（true）表示删除指定節點及其所有下屬節點。被删除的節點成為了孤立節點，不再具有有孩子節點和雙親節點。

【相容處理】Firefox中節點沒有removeNode方法，隻能用removeChild方法代替，先回到父節點，在從父節點上移除要移除的節點。

node.parentNode.removeChild(node);    //  為了在ie和firefox下都能正常使用，取上一層的父結點，然後remove。

7. childNodes擷取的節點

【分析說明】childNodes的下标的含義在IE和Firefox中不同，看一下下面的代碼：

< ul  id ="main" > 

< li >1 </ li >

< li >2 </ li >

< li >3 </ li >

</ ul > 

< input  type =button  value ="click me!"  onclick = "alert(document.getElementById('main').childNodes.length)" >

分别用IE和Firefox運作，IE的結果是3，而Firefox則是7。Firefox使用DOM規範，"#text"表示文本（實際是無意義的空格和換行等）在Firefox裡也會被解析成一個節點，在IE裡隻有有實際意義的文本才會解析成"#text"。

【相容處理】

方法一，擷取子節點時，可以通過node.getElementsByTagName()來回避這個問題。但是 getElementsByTagName對複雜的DOM結構周遊明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結構。

方法二，在實際運用中，Firefox在周遊子節點時，不妨在for循環裡加上：

if(childNode.nodeName=="#text")  continue; // 或者使用nodeType == 1。

這樣可以跳過一些文本節點。

延伸閱讀

　　《IE和FireFox中的childNodes差別》

8. Firefox不能對innerText支援

【分析說明】Firefox不支援innerText，它支援textContent來實作innerText，不過textContent沒有像innerText一樣考慮元素的display方式，是以不完全與IE相容。如果不用textContent，字元串裡面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實作，可參考《為firefox實作innerText屬性》一文。

【相容處理】通過判斷浏覽器類型來相容：

if(document.all){

document.getElementById('element').innerText = "my text";

}  else{

document.getElementById('element').textContent = "my text";

}

四、事件處理

　　如果在使用javascript的時候涉及到event處理，就需要知道event在不同的浏覽器中的差異，主要的JavaScript的事件模型有三種（參考《Supporting Three Event Models at Once》），它們分别是NN4、IE4+和W3C/Safar。

1. window.event

【分析說明】先看一段代碼

function et()

{ 

alert(event); // IE: [object]

}

　　以上代碼在IE運作的結果是[object]，而在Firefox無法運作。

　　因為在IE中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數提供一個事件響應的接口。

【相容處理】添加對event判斷，根據浏覽器的不同來得到正确的event：

function et()

{ 

evt=evt?evt:(window.event?window.event: null);   　　 // 相容IE和Firefox

alert(evt);

}

2. 鍵盤值的取得

【分析說明】IE和Firefox擷取鍵盤值的方法不同，可以了解，Firefox下的event.which與IE下的event.keyCode相當。關于彼此不同，可參考《鍵盤事件中keyCode、which和charCode 的相容性測試》

【相容處理】

function myKeyPress(evt){ //相容IE和Firefox獲得keyBoardEvent對象

evt = (evt) ? evt : ((window.event) ? window.event : "")      //相容IE和Firefox獲得keyBoardEvent對象的鍵值

var key = evt.keyCode?evt.keyCode:evt.which;  if(evt.ctrlKey && (key == 13 || key == 10)){    　　　　　　// 同時按下了Ctrl和Enter鍵

// do something;

}

}

3. 事件源的擷取

【分析說明】在使用事件委托的時候，通過事件源擷取來判斷事件到底來自哪個元素，但是，在IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。 

【相容處理】

ele= function(evt){  // 捕獲目前事件作用的對象

evt=evt||window.event;

　　return  　　(obj=event.srcElement?event.srcElement:event.target;);

}

4. 事件監聽

【分析說明】在事件監聽處理方面，IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener。

【相容處理】最簡單的相容性處理就是封裝這兩套接口：

function addEvent(elem, eventName, handler) {

　　 if (elem.attachEvent) {

　　　　elem.attachEvent("on" + eventName,  function(){ 　　　　　　　　　　　　　　　　　　　　handler.call(elem)});   　　　　//此處使用回調函數call()，讓this指向elem

　　}  else  if (elem.addEventListener) {

　　　　elem.addEventListener(eventName, handler,  false);

　　} }

function removeEvent(elem, eventName, handler) {

　　 if (elem.detachEvent) {

　　　　elem.detachEvent("on" + eventName,  function(){ 　　　　　　　　　　　　　　　　　　　　handler.call(elem)});   　　　　//此處使用回調函數call()，讓this指向elem

　　}  else  if (elem.removeEventListener) {

　　　　elem.removeEventListener(eventName, handler,  false);

　　}

}

　　需要特别注意，Firefox下，事件處理函數中的this指向被監聽元素本身，而在IE下則不然,可使用回調函數call，讓目前上下文指向監聽的元素。

5. 滑鼠位置

【分析說明】IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性；Firefox下，even對象有pageX，pageY屬性，但是沒有x，y屬性。 

【相容處理】使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。複雜點還要考慮絕對位置。

function getAbsPoint(e){

var x = e.offsetLeft, y = e.offsetTop;

while (e = e.offsetParent) {

x += e.offsetLeft;

y += e.offsetTop;

}

alert("x:" + x + "," + "y:" + y);

}

五、其他差異的相容處理

1. XMLHttpRequest

【分析說明】new ActiveXObject("Microsoft.XMLHTTP");隻在IE中起作用，Firefox不支援，但支援XMLHttpRequest。

【相容處理】

function createXHR() {

var xhr= null; 

if(window.XMLHttpRequest){

xhr= new ActiveXObject("Msxml2.XMLHTTP"); 

} else{ 

try { 

xhr= new ActiveXObject("Microsoft.XMLHTTP"); 

} 

catch() { 

xhr= null; 

} 

}

if(!xhr) return;

return xhr;

}

2. 模态和非模态視窗

【分析說明】IE中可以通過showModalDialog和showModelessDialog打開模态和非模态視窗，但是Firefox不支援。 

【解決辦法】直接使用window.open(pageURL,name,parameters)方式打開新視窗。 如果需要傳遞參數，可以使用frame或者iframe。

3. input.type屬性問題

IE下 input.type屬性為隻讀，但是Firefox下可以修改

4. 對select元素的option操作

設定options，IE和Firefox寫法不同：

Firefox:可直接設定

option.text = 'foooooooo';

IE:隻能設定

option.innerHTML = 'fooooooo';

删除一個select的option的方法：

Firefox:可以

select.options.remove(selectedIndex);

IE7:可以用

select.options[i] =  null;

IE6:需要寫

select.options[i].outerHTML =  null;

5. img對象alt和title的解析

【分析說明】img對象有alt和title兩個屬性，差別在于，alt：當照片不存在或者load錯誤時的提示。

title：照片的tip說明, 在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照标準中的定義使用 

在定義img對象時。

【相容處理】最好将alt和title對象都寫全，保證在各種浏覽器中都能正常使用 。

6. img的src重新整理問題

【分析說明】先看一下代碼：

< img  id ="pic"  onclick = "this.src= 'a.jpg'"    src ="aa.jpg" style="cursor: pointer"/>

在IE 下，這段代碼可以用來重新整理圖檔，但在FireFox下不行。主要是緩存問題。

【相容處理】在位址後面加個随機數就解決了: 

< img  id ="pic"  onclick = "javascript:this.src=this.src+'?' 　　　　　+Math.random()"src="a.jpg" style="cursor: pointer"/>

總結

　　IE和Firefox的Javascript方面存在着不少的差異，要做到相容，我覺得很有必要把一些常見的整理成一個js庫，如DOM的操作，事件的處理，XMLHttpRequest請求等，或者也可以選擇使用現有的一些庫(如jQuery，YUI，ExtJs等)，不過我覺得還是有必要了解一下這些差異，這樣對于我們參加相容性和可用性代碼很有幫助。

　　辦法總比問題多，無論浏覽器相容如何折騰人，做前端開發的總能迎刃而解的！

原文連結：http://www.cnblogs.com/ilexcai/archive/2011/08/20/2147173.html