常見瀏覽器兼容性問題與解決方案(上)

1. HTML對象獲取問題
FireFox:document.getElementById("idName");
ie:document.idname或者document.getElementById("idName").
解決辦法:統一使用document.getElementById("idName");
2. const問題
說明:Firefox下,能夠使用const關鍵字或var關鍵字來定義常量;
IE下,只能使用var關鍵字來定義常量. 
解決方法: 統一使用var關鍵字來定義常量.
3. event.x與event.y問題
說明:IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性. 
解決方法:使用mX(mX   =   event.x   ?   event.x   :   event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX. 
4. window.location.href問題
說明:IE或者Firefox2.0.x下,能夠使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location. 
解決方法:使用window.location來代替window.location.href. 
5. frame問題
如下面的frame爲例:
<frame   src="xxx.html"   id="frameId"   name="frameName"   />
(1)訪問frame對象:
IE:使用window.frameId或者window.frameName來訪問這個frame對象.   frameId和frameName能夠同名。
Firefox:只能使用window.frameName來訪問這個frame對象.
另外,在IE和Firefox中均可以使用window.document.getElementById("frameId")來訪問這個frame對象.
(2)切換frame內容:
在 IE和Firefox中均可以使用window.document.getElementById("testFrame").src   =   "xxx.html"或window.frameName.location   =   "xxx.html"來切換frame的內容.
若是須要將frame中的參數傳回父窗口(注意不是opener,而是parent   frame),能夠在frame中使用parent來訪問父窗口。例如:parent.document.form1.filename.value="Aqing";
6. 模態和非模態窗口問題
說明:IE下,能夠經過showModalDialog和showModelessDialog打開模態和非模態窗口;Firefox下則不能. 
解決方法:直接使用window.open(pageURL,name,parameters)方式打開新窗口。
若是須要將子窗口中的參數傳遞迴父窗口,能夠在子窗口中使用window.opener來訪問父窗口. 
例如:var   parWin   =   window.opener;   parWin.document.getElementById("Aqing").value   =   "Aqing"; 
7. firefox與IE的父元素(parentElement)的區別
IE:obj.parentElement
firefox:obj.parentNode
解決方法:   由於firefox與IE都支持DOM,所以使用obj.parentNode是不錯選擇.
8. document.formName.item(」itemName」) 問題
問題說明:IE下,能夠使用 document.formName.item(」itemName」) 或 document.formName.elements ["elementName"];Firefox 下,只能使用document.formName.elements["elementName"]。
解決方法:統一使用document.formName.elements["elementName"]。
9. 集合類對象問題
問題說明:IE下,能夠使用 () 或 [] 獲取集合類對象;Firefox下,只能使用 [ ]獲取集合類對象。
解決方法:統一使用 [] 獲取集合類對象。
10. 自定義屬性問題
問題說明:IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,也能夠使用 getAttribute() 獲取自定義屬性;Firefox下,只能使用 getAttribute() 獲取自定義屬性。
解決方法:統一經過 getAttribute() 獲取自定義屬性。
11. input.type屬性問題
問題說明:IE下 input.type 屬性爲只讀;可是Firefox下 input.type 屬性爲讀寫。
解決辦法:不修改 input.type 屬性。若是必需要修改,能夠先隱藏原來的input,而後在一樣的位置再插入一個新的input元素。
12. event.srcElement問題
問題說明:IE下,even對象有srcElement屬性,可是沒有target屬性;Firefox下,even對象有target屬性,可是沒有srcElement屬性。
解決方法:使用srcObj = event.srcElement ? event.srcElement : event.target;
若是考慮第8條問題,就改用myEvent代替event便可。html

相關文章
相關標籤/搜索