瀏覽器兼容性彙總--JavaScript篇

目錄

JavaScript中的兼容性彙總

1.        HTML對象獲取問題

2.        const問題

3.        event.x與event.y問題

4.        window.location.href問題

5.        frame問題.

6.        模態和非模態窗口問題

7.        firefox與IE的父元素(parentElement)的區別

8.        document.formName.item(」itemName」) 問題

9.        集合類對象問題

10.      自定義屬性問題

11.      input.type屬性問題

12.      event.srcElement問題

13.      body載入問題

14.      事件委託方法

15.      Table操做問題

16.      對象寬高賦值問題

 

 

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便可。

13. body載入問題

問題說明：Firefox的body對象在body標籤沒有被瀏覽器徹底讀入以前就存在；而IE的body對象則必須在body標籤被瀏覽器徹底讀入以後才存在。
[注] 這個問題還沒有實際驗證，待驗證後再來修改。
[注] 經驗證，IE六、Opera9以及FireFox2中不存在上述問題，單純的JS腳本能夠訪問在腳本以前已經載入的全部對象和元素，即便這個元素尚未載入完成。

14. 事件委託方法

問題說明：IE下，使用document.body.onload = inject; 其中function inject()在這以前已被實現；在Firefox下，使用document.body.onload = inject();
解決方法：統一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){/* 這裏是代碼 */}
[注意] Function和function的區別。

15. Table操做問題

問題說明：ie、firefox以及其它瀏覽器對於 table 標籤的操做都各不相同，在ie中不容許對table和tr的innerHTML賦值，使用js增長一個tr時，使用appendChild方法也無論用。
解決方法：//向table追加一個空行：
var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);[注] 因爲俺不多使用JS直接操做表格，這個問題沒有碰見過。建議使用JS框架集來操做table，如JQuery。

16.  對象寬高賦值問題

問題說明：FireFox中相似obj.style.height = imgObj.height的語句無效。

 

解決方法: if(navigator.appName.indexOf("Explorer")   >   -1){         document.getElementById('element').innerText   =   "my   text"; }   else{         document.getElementById('element').textContent   =   "my   text"; }