IE和Firefox中Javascript兼容性問題的示例分析

這篇文章主要介紹了IE和Firefox中Javascript兼容性問題的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

由于長久以來JavaScript兼容性一直是Web開發者的一個主要問題，本文向大家描述一下IE和Firefox的Javascript兼容性總結，主要包括函數和方法差異；樣式訪問和設置；DOM方法及對象引用等五個方面的內容。

IE和Firefox的Javascript兼容性總結

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

一、函數和方法差異；

二、樣式訪問和設置；

三、DOM方法及對象引用；

四、事件處理；

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

一、函數和方法差異

1.getYear()方法

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

viewsourceprint?

1varyear=newDate().getYear();document.write(year);

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

【兼容處理】

加上對年份的判斷，如:

viewsourceprint?

1varyear=newDate().getYear();  year=(year<1900?(1900+year):year);   document.write(year);

也可以通過getFullYeargetUTCFullYear去調用:

viewsourceprint?

1varyear=newDate().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關鍵字。如：

viewsourceprint?

1constconstVar=32;

在IE中這是語法錯誤。

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

4.var

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

viewsourceprint?

1echo=function(str){document.write(str);}

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

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

5.const問題

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

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

二、樣式訪問和設置

1.CSS的"float"屬性

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

在IE中這樣寫：

viewsourceprint?

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

在Firefox中這樣寫：

viewsourceprint?

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

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

viewsourceprint?

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

2.訪問<label>標簽中的"for"

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

在IE中這樣寫：

viewsourceprint?

1varmyObject=document.getElementById("myLabel");   varmyAttribute=myObject.getAttribute("htmlFor");

在Firefox中這樣寫：

viewsourceprint?

1varmyObject=document.getElementById("myLabel");   varmyAttribute=myObject.getAttribute("for");

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

3.訪問和設置class屬性

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

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

viewsourceprint?

1varmyObject=document.getElementById("header");   varmyAttribute=myObject.getAttribute("className");

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

viewsourceprint?

1varmyObject=document.getElementById("header");   varmyAttribute=myObject.getAttribute("class");

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

setAttribute("className",value);

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

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

【兼容處理】

方法一，兩種都寫上：

viewsourceprint?

1varmyObject=document.getElementById("header");   myObject.setAttribute("class","classValue");   myObject.setAttribute("className","classValue");   //設置header的class為classValue

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

viewsourceprint?

1varmyObject=document.getElementById("header");   myObject.className="classValue";   //設置header的class為classValue

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

4.對象寬高賦值問題

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

【兼容處理】統一使用obj.style.height=imgObj.height+&lsquo;px&rsquo;;

三、DOM方法及對象引用

1.getElementById

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

viewsourceprint?

1<!--input對象訪問1--><inputidinputid="id"type="button"   value="clickme"ōnclick="alert(id.value)"/>

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

【兼容處理】盡量采用W3CDOM的寫法，訪問對象的時候，用document.getElementById("id")以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標簽名來訪問對象的時候，用document.getElementsByTagName("div")[0]。該方式得到較多瀏覽器的支持。

viewsourceprint?

1<!--input對象訪問2-->  <inputidinputid="id"type="button"value="clickme"  onclick="alert(document.getElementById('id').value)"/>

2.集合類對象訪問

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

viewsourceprint?

1document.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>元素中，如下面所示：

viewsourceprint?

1varrow=document.createElement("tr");   varcell=document.createElement("td");   varcell_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方法代替，先回到父節點，在從父節點上移除要移除的節點。

viewsourceprint?

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

7.childNodes獲取的節點

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

viewsourceprint?

1<ulidulid="main"><li>1</li><li>2</li><li>3</li></ul>  <inputtypeinputtype=buttonvalue="clickme!"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循環里加上：

viewsourceprint?

1if(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屬性》一文。

【兼容處理】通過判斷瀏覽器類型來兼容：

viewsourceprint?

1if(document.all){document.getElementById('element').innerText="mytext";   }else{document.getElementById('element').textContent="mytext";}

四、事件處理

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

1.window.event

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

viewsourceprint?

1functionet(){alert(event);//IE:[object]}

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

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

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

viewsourceprint?

1functionet(){evtevt=evt?evt:(window.event?window.event:null);   //兼容IE和Firefoxalert(evt);}

2.鍵盤值的取得

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

【兼容處理】

viewsourceprint?

1functionmyKeyPress(evt){   //兼容IE和Firefox獲得keyBoardEvent對象evt=(evt)?   evt:((window.event)?window.event:"")  //兼容IE和Firefox獲得keyBoardEvent對象的鍵值   varkey=evt.keyCode?evt.keyCode:evt.which;  if(evt.ctrlKey&&(key==13||key==10)){  //同時按下了Ctrl和回車鍵//dosomething;}}

3.事件源的獲取

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

【兼容處理】

viewsourceprint?

1ele=function(evt){//捕獲當前事件作用的對象evtevt=evt||window.event;   return   (obj=event.srcElement?event.srcElement:event.target;);}

4.事件監聽

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

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

viewsourceprint?

1functionaddEvent(elem,eventName,handler){   if(elem.attachEvent){   elem.attachEvent("on"+eventName,function(){   handler.call(elem)});  //此處使用回調函數call()，讓this指向elem   }elseif(elem.addEventListener){   elem.addEventListener(eventName,handler,false);   }  }functionremoveEvent(elem,eventName,handler){   if(elem.detachEvent){   elem.detachEvent("on"+eventName,function(){   handler.call(elem)});  //此處使用回調函數call()，讓this指向elem   }elseif(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。復雜點還要考慮絕對位置。

viewsourceprint?

1functiongetAbsPoint(e){varx=e.offsetLeft,y=e.offsetTop;   while(ee=e.offsetParent){x+=e.offsetLeft;y+=e.offsetTop;}   alert("x:"+x+","+"y:"+y);}

五、其他差異的兼容處理

1.XMLHttpRequest

【分析說明】newActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。

【兼容處理】

viewsourceprint?

1functioncreateXHR(){varxhr=null;   if(window.XMLHttpRequest){xhr=newActiveXObject("Msxml2.XMLHTTP");}   else{try{xhr=newActiveXObject("Microsoft.XMLHTTP");}   catch(){xhr=null;}}if(!xhr)return;returnxhr;}

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:可直接設置

viewsourceprint?

1option.text='foooooooo';

IE:只能設置

viewsourceprint?

1option.innerHTML='fooooooo';

刪除一個select的option的方法：

Firefox:可以

viewsourceprint?

1select.options.remove(selectedIndex);

IE7:可以用

viewsourceprint?

1select.options[i]=null;

IE6:需要寫

viewsourceprint?

1select.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刷新問題

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

viewsourceprint?

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

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

【兼容處理】在地址后面加個隨機數就解決了:

viewsourceprint?

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“IE和Firefox中Javascript兼容性問題的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!