長久以來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';
三、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和斷行符號鍵
//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等),不過我覺得還是有必要瞭解一下這些差異,這樣對於我們參加相容性和可用性代碼很有協助。
辦法總比問題多,無論瀏覽器安全色如何折騰人,做前端開發的總能迎刃而解的!