Javascript相容性總結

ie與標準瀏覽器對js的實現和介面支援各不相同，本文的目的是將常用的相容性問題總結。

1. 集合類對象問題
現有代碼中許多集合類對象取用時使用 ()，IE 能接受，Firefox 不能。
解決方案：改用 [] 作為下標運算。如：document.forms("formName") 改為
Js代碼 複製代碼
 
document.forms["formName"];
//又如：
document.getElementsByName("inputName")(1);
//改為
document.getElementsByName("inputName")[1];

2. DIV對象
在 IE 中，DIV對象可以使用ID作為物件變數名直接使用。在 Firefox 中不能。
DivId.style.display = "none";
解決方案：document.getElementById("DivId").style.display = "none";
ps:得對象的方法不管是不是DIV對象，都應該使用getElementById方法。

3. 關於frame
現有問題：在 IE中 可以用window.testFrame取得該frame，mf中不行
解決方案：在frame的使用方面Firefox和IE的最主要的區別是：
如果在frame標籤中書寫了以下屬性：
那麼IE可以通過id或者name訪問這個frame對應的window對象
而mf只可以通過name來訪問這個frame對應的window對象
例如如果上述frame標籤寫在最上層的window裡面的htm裡面，那麼可以這樣訪問
IE： window.top.frameId或者window.top.frameName來訪問這個window對象
Firefox：只能這樣window.top.frameName來訪問這個window對象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")來訪問frame標籤
並且可以通過window.top.document.getElementById("testFrame").src = ‘xx.htm’來切換frame的內容
也都可以通過window.top.frameName.location = ‘xx.htm’來切換frame的內容

4. 視窗
現有問題：IE中可以通過showModalDialog和showModelessDialog開啟模態和非模態視窗，但是Firefox不支援。
解決辦法：直接使用window.open(pageURL,name,parameters)方式開啟新視窗。
如果需要傳遞參數，可以使用frame或者iframe。

5. 在JS中定義各種物件變數名時，盡量使用id，避免使用name.
在 IE 中，HTML 對象的 ID 可以作為 document 的下屬物件變數名直接使用。在 Firefox 中不能，所以在平常使用時請盡量使用id，避免只使用name，而不使用id。

6. document.all
Firefox可以相容document.all， 但會產生一條警告。可以用getElementById("*") 或者 getElementByTagName("*)來代替
不過對於document.all.length等屬性，則完全不相容。大家盡量不要使用document.all屬性.

7. parentElement
IE中支援使用parentElement和parentNode擷取父節點.
而Firefox只可以使用parentNode.

8. event
W3C不支援windows.event
比方說,在IE裡面:
function onMenuClick(){
 collapseMenu(event.srcElement);
}
工作正常。不過在Firefox中，則改成：
function onMenuClick(evt){
 if(evt == null)
 evt = window.event; // For IE
 var srcElement = evt.srcElement? evt.srcElement : evt.target;
 // IE使用srcElement, 而Firefox使用target
 collapseMenu(srcElement);

9. event.x 與 event.y 問題
在IE 中，event 對象有 x, y 屬性，Firefox中沒有。
解決方案:
在Firefox中，與event.x 等效的是 event.pageX。但event.pageX IE中沒有。
故採用 event.clientX 代替 event.x。在IE 中也有這個變數。
event.clientX 與 event.pageX 有微妙的差別（當整個頁面有捲軸的時候），
不過大多數時候是等效的。
如果要完全一樣，可以稍麻煩些：
mX = event.x ? event.x : event.pageX;
然後用 mX 代替 event.x

10. 用idName字串取得對象的問題
在IE中，利用 eval(idName) 可以取得 id 為 idName 的 HTML 對象，在Firefox中不能。
解決辦法:用 getElementById(idName) 代替 eval(idName).

11. nodeName 和 tagName 問題
在Firefox中，所有節點均有 nodeName 值，但 textNode 沒有 tagName 值。
在IE中nodeName 的使用有時會有問題。
解決方案：
使用 tagName，但應檢測其是否為空白。

12. input的type屬性
IE下 input.type屬性為唯讀，但是Firefox下可以修改.

13. 自訂屬性
在mf中，自己定義的屬性必須getAttribute()取得
而IE可以直接通過"."運算子擷取.

14.const 問題
在 IE 中不能使用 const 關鍵字。如
const constVar = 32;
在IE中這是語法錯誤.
解決方案:
不使用 const ，以 var 代替.

15. body 對象
Firefox的body在body標籤沒有被瀏覽器完全讀入之前就存在，而IE則必須在body完全被讀入之後才存在.

16. img對象alt和title的解析
alt：當照片不存在或者load錯誤時的提示,
title：照片的tip說明,
在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在Firefox中，兩者完全按照標準中的定義使用
在定義img對象時，最好將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用

17.childNodes擷取的節點
childNodes的下標的含義在IE和Firefox中不同，Firefox使用DOM規範，childNodes中會插入空白文本節點。
擷取子節點時,一般可以通過node.getElementsByTagName()來迴避這個問題。

18.removeNode()
Firefox中節點沒有removeNode方法，必須使用如下方法
node.parentNode.removeChild(node);

19.innerText
IE支援，FIREFOX不支援
FF中設定內容文本是用textConent屬性.

20. XMLHTTP的區別
FireFox中的建立方法為:
xmlhttp=new XMLHttpRequest()
而在IE中為:
xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”)

21. img的src重新整理問題
在IE 下可以用 可以重新整理圖片，但在FireFox下不行。主要是緩衝問題，在地址後面加個隨機數就解決了:
myImg.src=this.src+’?'+Math.random();

22. setAttribute()設定屬性問題
IE中很多屬性都不能用setAttribute進行設定,但Firefox中卻可以,如:
theDiv.setAttribute('style','color:red');
//改為:
object.style.cssText = 'color:red;';
setAttribute('class','styleClass')
//改為:
setAttribute('className','styleClass');
obj.setAttribute('onclick','funcitonname();');
//改為:
obj.onclick=function(){fucntionname();};

23. outterHTML
IE提供了outerHTML介面，可以返回dom節點（包括節點本身）的html代碼:而其他標準瀏覽器則不支援該介面。