IE和Firefox中Javascript兼容性問(wèn)題
由于長(zhǎng)久以來(lái)JavaScript兼容性一直是Web開(kāi)發(fā)者的一個(gè)主要問(wèn)題，本文向大家描述一下IE和Firefox的Javascript兼容性總結(jié)，主要包括函數(shù)和方法差異；樣式訪問(wèn)和設(shè)置；DOM方法及對(duì)象引用等五個(gè)方面的內(nèi)容。
IE和Firefox的Javascript兼容性總結(jié)
長(zhǎng)久以來(lái)JavaScript兼容性一直是Web開(kāi)發(fā)者的一個(gè)主要問(wèn)題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開(kāi)發(fā)者日夜煎熬。為此，主要從以下幾方面差異總結(jié)IE和Firefox的Javascript兼容性:
一、函數(shù)和方法差異；
二、樣式訪問(wèn)和設(shè)置；
三、DOM方法及對(duì)象引用；
四、事件處理；
五、其他差異的兼容處理。
一、函數(shù)和方法差異
1.getYear()方法
【分析說(shuō)明】先看一下以下代碼：
viewsourceprint?
- 1varyear=newDate().getYear();document.write(year);
在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因?yàn)樵贔irefox里面getYear返回的是"當(dāng)前年份-1900"的值。
【兼容處理】
加上對(duì)年份的判斷，如:
viewsourceprint?
- 1varyear=newDate().getYear();
- year=(year<1900?(1900+year):year);
- document.write(year);
也可以通過(guò)getFullYeargetUTCFullYear去調(diào)用:
viewsourceprint?
- 1varyear=newDate().getFullYear();document.write(year);
2.eval()函數(shù)
【分析說(shuō)明】在IE中，可以使用eval("idName")或getElementById("idName")來(lái)取得id為idName的HTML對(duì)象；Firefox下只能使用getElementById("idName")來(lái)取得id為idName的HTML對(duì)象。
【兼容處理】統(tǒng)一用getElementById("idName")來(lái)取得id為idName的HTML對(duì)象。
3.const聲明
【分析說(shuō)明】在IE中不能使用const關(guān)鍵字。如：
viewsourceprint?
- 1constconstVar=32;
在IE中這是語(yǔ)法錯(cuò)誤。
【兼容處理】不使用const，以var代替。
4.var
【分析說(shuō)明】請(qǐng)看以下代碼：
viewsourceprint?
- 1echo=function(str){document.write(str);}
這個(gè)函數(shù)在IE上運(yùn)行正常，F(xiàn)irefox下卻報(bào)錯(cuò)了。
【兼容處理】而在echo前加上var就正常了，這個(gè)就是我們提到var的目的。
5.const問(wèn)題
【分析說(shuō)明】在IE中不能使用const關(guān)鍵字。如constconstVar=32;在IE中這是語(yǔ)法錯(cuò)誤。
【解決方法】不使用const，以var代替。#p#
二、樣式訪問(wèn)和設(shè)置
1.CSS的"float"屬性
【分析說(shuō)明】Javascript訪問(wèn)一個(gè)給定CSS值的最基本句法是：object.style.property，但部分CSS屬性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同瀏覽器寫(xiě)法不同。
在IE中這樣寫(xiě)：
viewsourceprint?
- 1document.getElementById("header").style.styleFloat="left";
在Firefox中這樣寫(xiě)：
viewsourceprint?
- 1document.getElementById("header").style.cssFloat="left";
【兼容處理】在寫(xiě)之前加一個(gè)判斷，判斷瀏覽器是否是IE：
viewsourceprint?
- 1if(document.all){
- document.getElementById("header").style.styleFloat="left";}else{
- document.getElementById("header").style.cssFloat="left";}
2.訪問(wèn)<label>標(biāo)簽中的"for"
【分析說(shuō)明】和"float"屬性一樣，同樣需要使用不現(xiàn)的句法區(qū)分來(lái)訪問(wèn)<label>標(biāo)簽中的"for"。
在IE中這樣寫(xiě)：
viewsourceprint?
- 1varmyObject=document.getElementById("myLabel");
- varmyAttribute=myObject.getAttribute("htmlFor");
在Firefox中這樣寫(xiě)：
viewsourceprint?
- 1varmyObject=document.getElementById("myLabel");
- varmyAttribute=myObject.getAttribute("for");
【兼容處理】解決的方法也是先判斷瀏覽器類(lèi)型。
3.訪問(wèn)和設(shè)置class屬性
【分析說(shuō)明】同樣由于class是Javascript保留字的原因，這兩種瀏覽器使用不同的JavaScript方法來(lái)獲取這個(gè)屬性。
IE8.0之前的所有IE版本的寫(xiě)法：
viewsourceprint?
- 1varmyObject=document.getElementById("header");
- varmyAttribute=myObject.getAttribute("className");
適用于IE8.0以及firefox的寫(xiě)法：
viewsourceprint?
- 1varmyObject=document.getElementById("header");
- varmyAttribute=myObject.getAttribute("class");
另外，在使用setAttribute()設(shè)置Class屬性的時(shí)候，兩種瀏覽器也存在同樣的差異。
setAttribute("className",value);
這種寫(xiě)法適用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"屬性了。
setAttribute("class",value);適用于IE8.0以及firefox。
【兼容處理】
方法一，兩種都寫(xiě)上：
viewsourceprint?
- 1varmyObject=document.getElementById("header");
- myObject.setAttribute("class","classValue");
- myObject.setAttribute("className","classValue");
- //設(shè)置header的class為classValue
方法二，IE和FF都支持object.className，所以可以這樣寫(xiě)：
viewsourceprint?
- 1varmyObject=document.getElementById("header");
- myObject.className="classValue";
- //設(shè)置header的class為classValue
方法三，先判斷瀏覽器類(lèi)型，再根據(jù)瀏覽器類(lèi)型采用對(duì)應(yīng)的寫(xiě)法。
4.對(duì)象寬高賦值問(wèn)題
【分析說(shuō)明】FireFox中類(lèi)似obj.style.height=imgObj.height的語(yǔ)句無(wú)效。
【兼容處理】統(tǒng)一使用obj.style.height=imgObj.height+‘px’;#p#
三、DOM方法及對(duì)象引用
1.getElementById
【分析說(shuō)明】先來(lái)看一組代碼：
viewsourceprint?
- 1<!--input對(duì)象訪問(wèn)1--><inputidinputid="id"type="button"
- value="clickme"ōnclick="alert(id.value)"/>
在Firefox中，按鈕沒(méi)反應(yīng)，在IE中，就可以，因?yàn)閷?duì)于IE來(lái)說(shuō)，一個(gè)HTML元素的ID可以直接在腳本中當(dāng)作變量名來(lái)使用，而Firefox中不可以。
【兼容處理】盡量采用W3CDOM的寫(xiě)法，訪問(wèn)對(duì)象的時(shí)候，用document.getElementById("id")以ID來(lái)訪問(wèn)對(duì)象，且一個(gè)ID在頁(yè)面中必須是唯一的，同樣在以標(biāo)簽名來(lái)訪問(wèn)對(duì)象的時(shí)候，用document.getElementsByTagName("div")[0]。該方式得到較多瀏覽器的支持。
viewsourceprint?
- 1<!--input對(duì)象訪問(wèn)2-->
- <inputidinputid="id"type="button"value="clickme"
- onclick="alert(document.getElementById('id').value)"/>
2.集合類(lèi)對(duì)象訪問(wèn)
【分析說(shuō)明】IE下，可以使用()或[]獲取集合類(lèi)對(duì)象；Firefox下，只能使用[]獲取集合類(lèi)對(duì)象。如：
viewsourceprint?
- 1document.write(document.forms("formName").src);
- //該寫(xiě)法在IE下能訪問(wèn)到Form對(duì)象的scrc屬性
【兼容處理】將document.forms("formName")改為document.forms["formName"]。統(tǒng)一使用[]獲取集合類(lèi)對(duì)象。
3.frame的引用
【分析說(shuō)明】IE可以通過(guò)id或者name訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象，而Firefox只可以通過(guò)name來(lái)訪問(wèn)這個(gè)frame對(duì)應(yīng)的window對(duì)象。
例如如果上述frame標(biāo)簽寫(xiě)在最上層的window里面的htm里面，那么可以這樣訪問(wèn)：
IE：window.top.frameId或者window.top.frameName來(lái)訪問(wèn)這個(gè)window對(duì)象；
Firefox：只能這樣window.top.frameName來(lái)訪問(wèn)這個(gè)window對(duì)象。
【兼容處理】使用frame的name來(lái)訪問(wèn)frame對(duì)象，另外，在IE和Firefox中都可以使用window.document.getElementById(”frameId”)來(lái)訪問(wèn)這個(gè)frame對(duì)象。
4.parentElement
【分析說(shuō)明】IE中支持使用parentElement和parentNode獲取父節(jié)點(diǎn)。而Firefox只可以使用parentNode。
【兼容處理】因?yàn)閒irefox與IE都支持DOM，因此統(tǒng)一使用parentNode來(lái)訪問(wèn)父節(jié)點(diǎn)。
5.table操作
【分析說(shuō)明】IE下table中無(wú)論是用innerHTML還是appendChild插入<tr>都沒(méi)有效果，而其他瀏覽器卻顯示正常。
【兼容處理】解決的方法是，將<tr>加到table的<tbody>元素中，如下面所示：
viewsourceprint?
- 1varrow=document.createElement("tr");
- varcell=document.createElement("td");
- varcell_text=document.createTextNode("插入的內(nèi)容");
- cell.appendChild(cell_text);row.appendChild(cell);
- document.getElementsByTagName("tbody")[0].appendChild(row);
6.移除節(jié)點(diǎn)removeNode()和removeChild()
【分析說(shuō)明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。
removeNode方法的功能是刪除一個(gè)節(jié)點(diǎn)，語(yǔ)法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點(diǎn)。
removeNode（false）表示僅僅刪除指定節(jié)點(diǎn)，然后這個(gè)節(jié)點(diǎn)的原孩子節(jié)點(diǎn)提升為原雙親節(jié)點(diǎn)的孩子節(jié)點(diǎn)。
removeNode（true）表示刪除指定節(jié)點(diǎn)及其所有下屬節(jié)點(diǎn)。被刪除的節(jié)點(diǎn)成為了孤立節(jié)點(diǎn)，不再具有有孩子節(jié)點(diǎn)和雙親節(jié)點(diǎn)。
【兼容處理】Firefox中節(jié)點(diǎn)沒(méi)有removeNode方法，只能用removeChild方法代替，先回到父節(jié)點(diǎn)，在從父節(jié)點(diǎn)上移除要移除的節(jié)點(diǎn)。
viewsourceprint?
- 1node.parentNode.removeChild(node);
- //為了在ie和firefox下都能正常使用，取上一層的父結(jié)點(diǎn)，然后remove。
7.childNodes獲取的節(jié)點(diǎn)
【分析說(shuō)明】childNodes的下標(biāo)的含義在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運(yùn)行，IE的結(jié)果是3，而Firefox則是7。Firefox使用DOM規(guī)范，"#text"表示文本（實(shí)際是無(wú)意義的空格和換行等）在Firefox里也會(huì)被解析成一個(gè)節(jié)點(diǎn)，在IE里只有有實(shí)際意義的文本才會(huì)解析成"#text"。
【兼容處理】
方法一，獲取子節(jié)點(diǎn)時(shí)，可以通過(guò)node.getElementsByTagName()來(lái)回避這個(gè)問(wèn)題。但是getElementsByTagName對(duì)復(fù)雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因?yàn)閏hildNodes能更好的處理DOM的層次結(jié)構(gòu)。
方法二，在實(shí)際運(yùn)用中，F(xiàn)irefox在遍歷子節(jié)點(diǎn)時(shí)，不妨在for循環(huán)里加上：
viewsourceprint?
- 1if(childNode.nodeName=="#text")continue;
- //或者使用nodeType==1。
這樣可以跳過(guò)一些文本節(jié)點(diǎn)。
延伸閱讀
《IE和FireFox中的childNodes區(qū)別》
8.Firefox不能對(duì)innerText支持
【分析說(shuō)明】Firefox不支持innerText，它支持textContent來(lái)實(shí)現(xiàn)innerText，不過(guò)textContent沒(méi)有像innerText一樣考慮元素的display方式，所以不完全與IE兼容。如果不用textContent，字符串里面不包含HTML代碼也可以用innerHTML代替。也可以用js寫(xiě)個(gè)方法實(shí)現(xiàn)，可參考《為firefox實(shí)現(xiàn)innerText屬性》一文。
【兼容處理】通過(guò)判斷瀏覽器類(lèi)型來(lái)兼容：
viewsourceprint?
- 1if(document.all){document.getElementById('element').innerText="mytext";
- }else{document.getElementById('element').textContent="mytext";}
#p#四、事件處理
如果在使用javascript的時(shí)候涉及到event處理，就需要知道event在不同的瀏覽器中的差異，主要的JavaScript的事件模型有三種（參考《SupportingThreeEventModelsatOnce》），它們分別是NN4、IE4+和W3C/Safar。
1.window.event
【分析說(shuō)明】先看一段代碼
viewsourceprint?
- 1functionet(){alert(event);//IE:[object]}
以上代碼在IE運(yùn)行的結(jié)果是[object]，而在Firefox無(wú)法運(yùn)行。
因?yàn)樵贗E中event作為window對(duì)象的一個(gè)屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過(guò)傳參的方法來(lái)傳播事件的，也就是說(shuō)你需要為你的函數(shù)提供一個(gè)事件響應(yīng)的接口。
【兼容處理】添加對(duì)event判斷，根據(jù)瀏覽器的不同來(lái)得到正確的event：
viewsourceprint?
- 1functionet(){evtevt=evt?evt:(window.event?window.event:null);
- //兼容IE和Firefoxalert(evt);}
2.鍵盤(pán)值的取得
【分析說(shuō)明】IE和Firefox獲取鍵盤(pán)值的方法不同，可以理解，F(xiàn)irefox下的event.which與IE下的event.keyCode相當(dāng)。關(guān)于彼此不同，可參考《鍵盤(pán)事件中keyCode、which和charCode的兼容性測(cè)試》
【兼容處理】
viewsourceprint?
- 1functionmyKeyPress(evt){
- //兼容IE和Firefox獲得keyBoardEvent對(duì)象evt=(evt)?
- evt:((window.event)?window.event:"")
- //兼容IE和Firefox獲得keyBoardEvent對(duì)象的鍵值
- varkey=evt.keyCode?evt.keyCode:evt.which;
- if(evt.ctrlKey&&(key==13||key==10)){
- //同時(shí)按下了Ctrl和回車(chē)鍵//dosomething;}}
3.事件源的獲取
【分析說(shuō)明】在使用事件委托的時(shí)候，通過(guò)事件源獲取來(lái)判斷事件到底來(lái)自哪個(gè)元素，但是，在IE下，event對(duì)象有srcElement屬性，但是沒(méi)有target屬性；Firefox下，even對(duì)象有target屬性，但是沒(méi)有srcElement屬性。
【兼容處理】
viewsourceprint?
- 1ele=function(evt){//捕獲當(dāng)前事件作用的對(duì)象evtevt=evt||window.event;
- return
- (obj=event.srcElement?event.srcElement:event.target;);}
4.事件監(jiān)聽(tīng)
【分析說(shuō)明】在事件監(jiān)聽(tīng)處理方面，IE提供了attachEvent和detachEvent兩個(gè)接口，而Firefox提供的是addEventListener和removeEventListener。
【兼容處理】最簡(jiǎn)單的兼容性處理就是封裝這兩套接口：
viewsourceprint?
- 1functionaddEvent(elem,eventName,handler){
- if(elem.attachEvent){
- elem.attachEvent("on"+eventName,function(){
- handler.call(elem)});
- //此處使用回調(diào)函數(shù)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)});
- //此處使用回調(diào)函數(shù)call()，讓this指向elem
- }elseif(elem.removeEventListener){
- elem.removeEventListener(eventName,handler,false);
- }}
需要特別注意，F(xiàn)irefox下，事件處理函數(shù)中的this指向被監(jiān)聽(tīng)元素本身，而在IE下則不然,可使用回調(diào)函數(shù)call，讓當(dāng)前上下文指向監(jiān)聽(tīng)的元素。
5.鼠標(biāo)位置
【分析說(shuō)明】IE下，even對(duì)象有x，y屬性，但是沒(méi)有pageX，pageY屬性；Firefox下，even對(duì)象有pageX，pageY屬性，但是沒(méi)有x，y屬性。
【兼容處理】使用mX(mX=event.x?event.x:event.pageX;)來(lái)代替IE下的event.x或者Firefox下的event.pageX。復(fù)雜點(diǎn)還要考慮絕對(duì)位置。
viewsourceprint?
- 1functiongetAbsPoint(e){varx=e.offsetLeft,y=e.offsetTop;
- while(ee=e.offsetParent){x+=e.offsetLeft;y+=e.offsetTop;}
- alert("x:"+x+","+"y:"+y);}
#p#五、其他差異的兼容處理
1.XMLHttpRequest
【分析說(shuō)明】newActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，F(xiàn)irefox不支持，但支持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.模態(tài)和非模態(tài)窗口
【分析說(shuō)明】IE中可以通過(guò)showModalDialog和showModelessDialog打開(kāi)模態(tài)和非模態(tài)窗口，但是Firefox不支持。
【解決辦法】直接使用window.open(pageURL,name,parameters)方式打開(kāi)新窗口。如果需要傳遞參數(shù)，可以使用frame或者iframe。
3.input.type屬性問(wèn)題
IE下input.type屬性為只讀，但是Firefox下可以修改
4.對(duì)select元素的option操作
設(shè)置options，IE和Firefox寫(xiě)法不同：
Firefox:可直接設(shè)置
viewsourceprint?
- 1option.text='foooooooo';
IE:只能設(shè)置
viewsourceprint?
- 1option.innerHTML='fooooooo';
刪除一個(gè)select的option的方法：
Firefox:可以
viewsourceprint?
- 1select.options.remove(selectedIndex);
IE7:可以用
viewsourceprint?
- 1select.options[i]=null;
IE6:需要寫(xiě)
viewsourceprint?
- 1select.options[i].outerHTML=null;
5.img對(duì)象alt和title的解析
【分析說(shuō)明】img對(duì)象有alt和title兩個(gè)屬性，區(qū)別在于，alt：當(dāng)照片不存在或者load錯(cuò)誤時(shí)的提示。
title：照片的tip說(shuō)明,在IE中如果沒(méi)有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標(biāo)準(zhǔn)中的定義使用
在定義img對(duì)象時(shí)。
【兼容處理】***將alt和title對(duì)象都寫(xiě)全，保證在各種瀏覽器中都能正常使用。
6.img的src刷新問(wèn)題
【分析說(shuō)明】先看一下代碼：
viewsourceprint?
- 1<imgidimgid="pic"onclick="this.src='a.jpg'"
- src="aa.jpg"style="cursor:pointer"/>
在IE下，這段代碼可以用來(lái)刷新圖片，但在FireFox下不行。主要是緩存問(wèn)題。
【兼容處理】在地址后面加個(gè)隨機(jī)數(shù)就解決了:
viewsourceprint?
- 1<imgidimgid="pic"onclick="javascript:this.src=this.src+'?'
- +Math.random()"src="a.jpg"style="cursor:pointer"/>
總結(jié)
IE和Firefox的Javascript方面存在著不少的差異，要做到兼容，我覺(jué)得很有必要把一些常見(jiàn)的整理成一個(gè)js庫(kù)，如DOM的操作，事件的處理，XMLHttpRequest請(qǐng)求等，或者也可以選擇使用現(xiàn)有的一些庫(kù)(如jQuery，YUI，ExtJs等)，不過(guò)我覺(jué)得還是有必要了解一下這些差異，這樣對(duì)于我們參加兼容性和可用性代碼很有幫助。
辦法總比問(wèn)題多，無(wú)論瀏覽器兼容如何折騰人，做前端開(kāi)發(fā)的總能迎刃而解的！
【編輯推薦】
- JavaScript巧解IE6至IE8兼容問(wèn)題
- JavaScript代碼輕松實(shí)現(xiàn)DIV圓角
- 網(wǎng)頁(yè)排版中IE6，IE7，F(xiàn)irefox瀏覽器兼容性寫(xiě)法
- CSS屬性display:inline-block使用揭秘
- Firefox、IE7、IE6瀏覽器兼容問(wèn)題概念解析
