JavaScript在IE和FF下的相容性問題_基礎知識

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

複製程式碼 程式碼如下:

一、函數與方法差異；
二、樣式存取與設定；
三、DOM方法及物件參考；
四、事件處理；
五、其他差異的相容處理。

一、函數與方法差異

1. getYear()方法

【分析說明】先看以下程式碼：

複製程式碼 程式碼如下:

var year= new Date(>

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

document.write(year);

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

【相容處理】加上對年份的判斷，如:

複製程式碼

程式碼如下:


var year= new Date(>

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

也可以透過 getFullYear getUTCFullYear 去呼叫:

複製程式碼

程式碼如下:

var year = new Date(>

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;

const constVar = 32;

🎜>

在IE中這是語法錯誤。

【相容處理】不使用 const ，以 var 代替。 4. var 【分析說明】請看以下程式碼：

複製程式碼

程式碼如下:

echo=function(str){ 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.styleFloheader").style.styleF = "left";

在Firefox這樣寫：

複製程式碼

程式碼如下:

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

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

複製程式碼 程式碼如下:

if(document.all){ // 
　　document.getElementById("header").style.styleFloat = "left"; 
} 
else{ //非ie 時為undefined 
　　document.getElementById("header").style.cssFloat = "left"; 
} 

2. 存取標籤中的"for"

【分析說明】和"float"屬性一樣，同樣需要使用不現的句法區分來存取標籤中的"for"。

在IE中這樣寫：

複製程式碼 程式碼如下:

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

在Firefox這樣寫：

複製程式碼 程式碼如下:

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

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

3. 存取與設定class屬性

【分析說明】同樣由於class是Javascript保留字的原因，這兩種瀏覽器使用不同的 JavaScript 方法來取得這個屬性。
IE8.0之前的所有IE版本的寫法：

複製程式碼 程式碼如下:

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

適用於IE8.0 以及 firefox的寫法：

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

setAttribute("className",>

setAttribute("className",value);

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

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

【相容處理】

方法一，兩種都寫上：

複製程式碼

程式碼如下:

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

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

複製程式碼

程式碼如下:


var myObject = document.getElementBydocument.getElementBydocument");

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(Hstyle. insertRule()方法 
}else{ 
　　//addRule()方法 
} 

6.最終樣式

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

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

三、DOM方法及物件引用

1. getElementById

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

複製程式碼 程式碼如下:

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

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

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

複製程式碼 程式碼如下:

  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插入

都沒有效果，而其他瀏覽器卻顯示正常。

【相容處理】解決的方法是，將

加到table的 元素中，如下面所示：

複製程式碼 程式碼如下:

var row = document.createElement("tr");
var cell = document.createElement("td"); 
var cell_text = document.createTextNode("插入的內容"); 
cell.appendChild(cell_text); 
row. ); 
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中不同，看一下下面的程式碼：

複製程式碼 程式碼如下:

  li>1 

• 2
 

• 3
 

  
"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){ . 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()


function et()
{; (event);//IE: [object]
}

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

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

【相容處理】加入對event判斷，依照瀏覽器的差異來得到正確的event：

複製程式碼

程式碼如下:

function et() 　　//相容IE和Firefox
alert(evt);
}

2. 鍵盤值的取得

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

【相容處理】

複製程式碼 程式碼如下:

function myKeyPress(evt){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)){
 　　　　t　　t鍵
//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) {f >　　if (elem.attachEvent) { 
　　　　elem.attachEvent("on" eventName, function(){ 
　　　　　　　　　　　　　　　　　　　　　handler.call(elem)}); 
 　　　　//此處使用回呼函數call()，讓this指向elem 
　　} else if (elem.addEventListener) { 
　　　　elem.addEventListener(eventName, handler, false); 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){ e.offsetLeft, y = e.offsetTop;  while (e = e.offsetParent) {  x = e.offsetLeft;  y = e.offsetTop;  } 

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.XML");
try {  
xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}  
catch() {  
x =null;   (!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';

option.text

IE:只能設定

複製程式碼 程式碼如下:

option.innerHTML = '🎜>

option.innerHTML = 'oooooooooooo'; 🎜>

刪除一個select的option的方法：

Firefox:可以

複製程式碼 程式碼如下:

select.options.remove(selectedIndex);

IE7:可以用

複製程式碼 程式碼如下:select.options[i] = null;

IE6:需要寫

複製程式碼

程式碼如下:select.options[i]。 🎜>

5. img物件alt和title的解析

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

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

在定義img物件時。

【相容處理】最好將alt和title物件都寫全，保證在各種瀏覽器中都能正常使用 。

6. img的src刷新問題

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

複製程式碼

程式碼如下:

在IE 下，這段程式碼可以用來刷新圖片，但在FireFox下不行。主要是緩存問題。

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

複製程式碼

程式碼如下:

總結

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

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