IE和Firefox的Javascript兼容性總結(jié)

精品word文檔值得下載值得擁有【總結(jié)】IE和Firefox的Javascript兼容性總結(jié)長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實(shí)標(biāo)準(zhǔn)以及各種實(shí)現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬。為此，主要從以下幾方面差異總結(jié)IE和Firefox的Javascript兼容性:一、函數(shù)和方法差異；二、樣式訪問和設(shè)置；三、DOM方法及對象引用；四、事件處理；五、其他差異的兼容處理。一、函數(shù)和方法差異1.getYear()方法【分析說明】先看一下以下代碼：varyear=newDate().getYear();

document.write(year);在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因?yàn)樵贔irefox里面getYear返回的是"當(dāng)前年份-1900"的值。【兼容處理】加上對年份的判斷，如:varyear=newDate().getYear();

year=(year<1900?(1900+year):year);document.write(year);也可以通過getFullYeargetUTCFullYear去調(diào)用:varyear=newDate().getFullYear();

document.write(year);2.eval()函數(shù)【分析說明】在IE中，可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML對象；Firefox下只能使用getElementById("idName")來取得id為idName的HTML對象?！炯嫒萏幚怼拷y(tǒng)一用getElementById("idName")來取得id為idName的HTML對象。3.const聲明【分析說明】在IE中不能使用const關(guān)鍵字。如：constconstVar=32;在IE中這是語法錯誤?！炯嫒萏幚怼坎皇褂胏onst，以var代替。4.var【分析說明】請看以下代碼：echo=function(str){

document.write(str);

}pre>這個函數(shù)在IE上運(yùn)行正常，F(xiàn)irefox下卻報錯了。【兼容處理】而在echo前加上var就正常了，這個就是我們提到var的目的。5.const問題【分析說明】在IE中不能使用const關(guān)鍵字。如constconstVar=32;在IE中這是語法錯誤?！窘鉀Q方法】不使用const，以var代替。二、樣式訪問和設(shè)置1.CSS的"float"屬性【分析說明】Javascript訪問一個給定CSS值的最基本句法是：perty，但部分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>標(biāo)簽中的"for"【分析說明】和"float"屬性一樣，同樣需要使用不現(xiàn)的句法區(qū)分來訪問<label>標(biāo)簽中的"for"。在IE中這樣寫：varmyObject=document.getElementById("myLabel");

varmyAttribute=myObject.getAttribute("htmlFor");在Firefox中這樣寫：varmyObject=document.getElementById("myLabel");

varmyAttribute=myObject.getAttribute("for");【兼容處理】解決的方法也是先判斷瀏覽器類型。3.訪問和設(shè)置class屬性【分析說明】同樣由于class是Javascript保留字的原因，這兩種瀏覽器使用不同的JavaScript方法來獲取這個屬性。IE8.0之前的所有IE版本的寫法：varmyObject=document.getElementById("header");

varmyAttribute=myObject.getAttribute("className");適用于IE8.0以及firefox的寫法：varmyObject=document.getElementById("header");

varmyAttribute=myObject.getAttribute("class");另外，在使用setAttribute()設(shè)置Class屬性的時候，兩種瀏覽器也存在同樣的差異。setAttribute("className",value);這種寫法適用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"屬性了。setAttribute("class",value);適用于IE8.0以及firefox?！炯嫒萏幚怼糠椒ㄒ?，兩種都寫上：varmyObject=document.getElementById("header");

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

myObject.setAttribute("className","classValue");//設(shè)置header的class為classValue方法二，IE和FF都支持object.className，所以可以這樣寫：varmyObject=document.getElementById("header");

myObject.className="classValue";//設(shè)置header的class為classValue方法三，先判斷瀏覽器類型，再根據(jù)瀏覽器類型采用對應(yīng)的寫法。4.對象寬高賦值問題【分析說明】FireFox中類似obj.style.height=imgObj.height的語句無效?！炯嫒萏幚怼拷y(tǒng)一使用obj.style.height=imgObj.height+‘px’;三、DOM方法及對象引用1.getElementById【分析說明】先來看一組代碼：<!--input對象訪問1-->

<inputid="id"type="button"

value="clickme"ōnclick="alert(id.value)"/>在Firefox中，按鈕沒反應(yīng)，在IE中，就可以，因?yàn)閷τ贗E來說，一個HTML元素的ID可以直接在腳本中當(dāng)作變量名來使用，而Firefox中不可以。【兼容處理】盡量采用W3CDOM的寫法，訪問對象的時候，用document.getElementById("id")以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標(biāo)簽名來訪問對象的時候，用document.getElementsByTagName("div")[0]。該方式得到較多瀏覽器的支持。<!--input對象訪問2-->

<inputid="id"type="button"value="clickme"onclick="alert(document.getElementById('id').value)"/>2.集合類對象訪問【分析說明】IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。如：document.write(document.forms("formName").src);//該寫法在IE下能訪問到Form對象的scrc屬性【兼容處理】將document.forms("formName")改為document.forms["formName"]。統(tǒng)一使用[]獲取集合類對象。3.frame的引用【分析說明】IE可以通過id或者name訪問這個frame對應(yīng)的window對象，而Firefox只可以通過name來訪問這個frame對應(yīng)的window對象。例如如果上述frame標(biāo)簽寫在最上層的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獲取父節(jié)點(diǎn)。而Firefox只可以使用parentNode?！炯嫒萏幚怼恳?yàn)閒irefox與IE都支持DOM，因此統(tǒng)一使用parentNode來訪問父節(jié)點(diǎn)。5.table操作【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他瀏覽器卻顯示正常?！炯嫒萏幚怼拷鉀Q的方法是，將<tr>加到table的<tbody>元素中，如下面所示：varrow=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()【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。removeNode方法的功能是刪除一個節(jié)點(diǎn)，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點(diǎn)。removeNode（false）表示僅僅刪除指定節(jié)點(diǎn)，然后這個節(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)?！炯嫒萏幚怼縁irefox中節(jié)點(diǎn)沒有removeNode方法，只能用removeChild方法代替，先回到父節(jié)點(diǎn)，在從父節(jié)點(diǎn)上移除要移除的節(jié)點(diǎn)。node.parentNode.removeChild(node);//為了在ie和firefox下都能正常使用，取上一層的父結(jié)點(diǎn)，然后remove。7.childNodes獲取的節(jié)點(diǎn)【分析說明】childNodes的下標(biāo)的含義在IE和Firefox中不同，看一下下面的代碼：<ulid="main">

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

<inputtype=buttonvalue="clickme!"onclick="alert(document.getElementById('main').childNodes.length)">分別用IE和Firefox運(yùn)行，IE的結(jié)果是3，而Firefox則是7。Firefox使用DOM規(guī)范，"#text"表示文本（實(shí)際是無意義的空格和換行等）在Firefox里也會被解析成一個節(jié)點(diǎn)，在IE里只有有實(shí)際意義的文本才會解析成"#text"。【兼容處理】方法一，獲取子節(jié)點(diǎn)時，可以通過node.getElementsByTagName()來回避這個問題。但是getElementsByTagName對復(fù)雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因?yàn)閏hildNodes能更好的處理DOM的層次結(jié)構(gòu)。方法二，在實(shí)際運(yùn)用中，F(xiàn)irefox在遍歷子節(jié)點(diǎn)時，不妨在for循環(huán)里加上：if(childNode.nodeName=="#text")continue;//或者使用nodeType==1。這樣可以跳過一些文本節(jié)點(diǎn)。延伸閱讀《IE和FireFox中的childNodes區(qū)別》8.Firefox不能對innerText支持【分析說明】Firefox不支持innerText，它支持textContent來實(shí)現(xiàn)innerText，不過textContent沒有像innerText一樣考慮元素的display方式，所以不完全與IE兼容。如果不用textContent，字符串里面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實(shí)現(xiàn)，可參考《為firefox實(shí)現(xiàn)innerText屬性》一文?！炯嫒萏幚怼客ㄟ^判斷瀏覽器類型來兼容：if(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【分析說明】先看一段代碼functionet()

{

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

}以上代碼在IE運(yùn)行的結(jié)果是[object]，而在Firefox無法運(yùn)行。因?yàn)樵贗E中event作為window對象的一個屬性可以直接使用，但是在Firefox中卻使用了W3C的模型，它是通過傳參的方法來傳播事件的，也就是說你需要為你的函數(shù)提供一個事件響應(yīng)的接口?！炯嫒萏幚怼刻砑訉vent判斷，根據(jù)瀏覽器的不同來得到正確的event：functionet()

{

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

alert(evt);

}2.鍵盤值的取得【分析說明】IE和Firefox獲取鍵盤值的方法不同，可以理解，F(xiàn)irefox下的event.which與IE下的event.keyCode相當(dāng)。關(guān)于彼此不同，可參考《鍵盤事件中keyCode、which和charCode的兼容性測試》【兼容處理】functionmyKeyPress(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屬性?！炯嫒萏幚怼縠le=function(evt){//捕獲當(dāng)前事件作用的對象

evt=evt||window.event;

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

}

4.事件監(jiān)聽【分析說明】在事件監(jiān)聽處理方面，IE提供了attachEvent和detachEvent兩個接口，而Firefox提供的是addEventListener和removeEventListener?！炯嫒萏幚怼孔詈唵蔚募嫒菪蕴幚砭褪欠庋b這兩套接口：functionaddEvent(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)聽元素本身，而在IE下則不然,可使用回調(diào)函數(shù)call，讓當(dāng)前上下文指向監(jiān)聽的元素。5.鼠標(biāo)位置【分析說明】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。復(fù)雜點(diǎn)還要考慮絕對位置。functiongetAbsPoint(e){

varx=e.offsetLeft,y=e.offsetTop;

while(e=e.offsetParent){

x+=e.offsetLeft;

y+=e.offsetTop;

}

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

}五、其他差異的兼容處理1.XMLHttpRequest【分析說明】newActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，F(xiàn)irefox不支持，但支持XMLHttpRequest?！炯嫒萏幚怼縡unctioncreateXHR(){

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)窗口【分析說明】IE中可以通過showModalDialog和showModelessDialog打開模態(tài)和非模態(tài)窗口，但是Firefox不支持?！窘鉀Q辦法】直接使用window.open(pageURL,name,parameters)方式打開新窗口。如果需要傳遞參數(shù)，可以使用frame或者iframe。3.input.type屬性問題IE下input.type屬性為只讀，但是Firefox下可以修改4.對select元素的option操作設(shè)置options，IE和Firefox寫法不同：Firefox:可直接設(shè)置option.text='foooooooo';IE:只能設(shè)置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兩個屬性，區(qū)別在于，alt：當(dāng)照片不存在或者load錯誤時的提示。title：照片的tip說明,在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標(biāo)準(zhǔn)中的定義使用在定義img對象時?！炯嫒萏幚怼孔詈脤lt和title對象都寫全，保證在各種瀏覽器中都能正常使用。6.img的src刷新問題【分析說明】先看一下代碼：<imgid="pic"onclick="this.src='a.jpg'"src="aa.jpg"style="cursor:pointer"/>在IE下，這段代碼可以用來刷新圖片，但在FireFox下不行。主要是緩存問題?！炯嫒萏幚怼吭诘刂泛竺婕觽€隨機(jī)數(shù)就解決了:<imgid="pic"onclick="javascript:this.sr