JavaScript 瀏覽器兼容性總結(jié)及常用瀏覽器兼容性分析

1/5JavaScript掃瞄器兼容性總結(jié)及常用掃瞄器兼容性分析我日常整理些關(guān)于js兼容性問(wèn)題，及IE與Firefox等常用掃瞄器的兼容性分析，對(duì)js掃瞄器兼容性相關(guān)學(xué)問(wèn)感愛(ài)好的伴侶一起學(xué)習(xí)吧！

1.children與childNodes

IE供應(yīng)的children、childNodes和firefox下的childNodes的行為是有區(qū)分的，firefox下childNodes會(huì)把換行和空白字符都算作父節(jié)點(diǎn)的子節(jié)點(diǎn)，而IE的childNodes和children不會(huì)。比方：

divid="dd"

divyizhu2000/div

/div

d為dd的div在IE下用childNodes查看，其子節(jié)點(diǎn)數(shù)為1，而ff下為三，我們可以從firefox的dom查看器里面看到他的childNodes為["\n",div,"\n"]。

要在firefox下模擬children的屬性我們可以這樣做：

if(typeof(HTMLElement)!="undefined"!window.opera){

HTMLEtotype.__defineGetter__("children",function(){

for(vara=[],j=0,n,i=0;ithis.childNodes.length;i++){

n=this.childNodes[i];

if(n.nodeType==1){

a[j++]=n;

if(){

if(!a[])

a[]=[];

a[][a[].length]=n;

}

if(n.id)

a[n.id]=n;

}

}

returna;

});

}

2.firefox和ie的大事

window.event只能在IE下使用，而不能用在Firefox下，這是由于Firefox的event只能在大事發(fā)生的現(xiàn)場(chǎng)使用。Firefox必需從源處參與event作參數(shù)傳遞。IE無(wú)視該參數(shù)，用window.event來(lái)讀取該event。

比方說(shuō)下面這個(gè)在ie下獲得鼠標(biāo)位置的方法：

buttononclick="onClick()"獲得鼠標(biāo)點(diǎn)擊橫坐標(biāo)/button

scripttype="text/javascript"

functiononclick(){

alert(event.clientX);

}

/script

需要改成

buttononclick="onClick(event)"獲得OuterHTML/button

scripttype="text/javascript"

functiononclick(event){

event=event||window.event;

alert(event.clientX);

}

/script

才能在兩種掃瞄器下使用

3.HTML對(duì)象獵取問(wèn)題

FireFox獵取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

解決方法：統(tǒng)一使用document.getElementById("idName");

4.const問(wèn)題

在Firefox下，可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量；

IE下，只能使用var關(guān)鍵字來(lái)定義常量；

解決方法：統(tǒng)一使用var關(guān)鍵字來(lái)定義常量。

5.frame問(wèn)題

以下面的frame為例：

framesrc="xxx.html"id="frameId"name="frameName"/

a)訪問(wèn)frame對(duì)象

IE：使用window.frameId或者window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象，frameId和frameName可以同名；

Firefox：只能使用window.frameName來(lái)訪問(wèn)這個(gè)frame對(duì)象；

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")來(lái)訪問(wèn)這個(gè)frame對(duì)象；

b)切換frame內(nèi)容

在IE和Firefox中都可以使用

window.document.getElementById("testFrame").src="xxx.html"或window.frameName.location="xxx.html"

來(lái)切換frame的內(nèi)容；

假設(shè)需要將frame中的參數(shù)傳回父窗口〔留意不是opener，而是parent〕，可以在frame中使用parent來(lái)訪問(wèn)父窗口。例如：

parent.document.form1.filename.value="Aqing";

6.body問(wèn)題

Firefox的body在body標(biāo)簽沒(méi)有被掃瞄器完全讀入之前就存在；而IE的body那么必需在body標(biāo)簽被掃瞄器完全讀入之后才存在；

7.firefox與IE的父元素(parentElement)的區(qū)分

IE：obj.parentElement

firefox：obj.parentNode

解決方法：由于firefox與IE都支持DOM，因此全部使用obj.parentNode

8.innerText的問(wèn)題

innerText在IE中能正常工作，但是innerText在FireFox中卻不行，需用textContent；

解決方法：

if(navigator.appName.indexOf("Explorer")-1){

document.getElementById('element').innerText="mytext";

}else{

document.getElementById('element').textContent="mytext";

}

9.AJAX獵取XMLHTTP的區(qū)分

varxmlhttp;

if(window.XMLHttpRequest){

xmlhttp=newXMLHttpRequest();

}elseif(window.ActiveXObject){//IE的獵取方式

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

留意：在IE中，xmlhttp