Firefox和IE相容性問題及解決方法總結_javascript技巧

在開發多語言java 網站的過程中，發現不少FF中可以正常運作的程式碼，可是在IE中不行，反之亦然。 IE與Firefox(火狐)在JavaScript方面的不相容及統一方法總結如下：

1.相容firefox的outerHTML，FF中沒有outerHtml的方法

複製程式碼 程式碼如下:

if (window.HTMLElement) {
HTMLElement.prototype.__defineSML( ,function(sHTML) {
var r=this.ownerDocument.createRange();
r.setStartBefore(this);
var df=r.createContextualFragment(sHTML);
this.parentNode. replaceChild(df,this);
return sHTML;
});

HTMLElement.prototype.__defineGetter__("outerHTML",function() {
var attr;
var rs =this.attributes;
var str="for (var i=0;i";
return str ">" this.innerHTML "";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
case "basefont":
case "col":
case " frame":
case "hr":
case "img":
case "br":
case "input":
case "isindex":
case "link" :
case "meta":
case "param":
return false;
}
return true;
});
}

2.集合類別物件問題

說明:IE下,可以使用()或[]取得集合類別物件;Firefox下,只能使用[]取得集合類別對象.解決方法:統一使用[]取得集合類別物件.

3.自訂屬性問題

說明:IE下,可以使用取得常規屬性的方法來取得自訂屬性,也可以使用getAttribute()取得自訂屬性;Firefox下,只能使用getAttribute()取得自訂屬性.解決方法:統一透過getAttribute()取得自訂屬性.

4.eval("idName")問題

說明:IE下,,可以使用eval("idName")或getElementById("idName")來取得id為idName的HTML物件; Firefox下只能使用getElementById("idName")來取得id為idName的HTML物件.解決方法:統一用getElementById("idName")來取得id為idName的HTML物件.

5 .變數名與某HTML物件ID相同的問題

說明:IE下,HTML物件的ID可以作為document的下屬物件變數名稱直接使用;Firefox下則不能.Firefox下,可以使用與HTML物件ID相同的變數名稱;IE下則不能。 解決方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML物件ID相同的變數名稱,以減少錯誤;在宣告變數時,一律加上var,以避免歧義.

6.const問題

說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常數;IE下,只能使用var關鍵字來定義常數.解決方法:統一使用var關鍵字來定義常數.

7.input.type屬性問題

說明:IE下input.type屬性為唯讀;但是Firefox下input.type屬性為讀寫.

8.window.event問題

說明:window.event只能在IE下運作,不能在Firefox下運行,這是因為Firefox的event只能在事件發生的現場使用.解決方法:

IE:

...

IE&Firefox:

...


9.event.x與event.y問題

說明: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.

10.event.srcElement問題

說明:IE下,even物件有srcElement屬性,但是沒有target屬性;Firefox下,even物件有target屬性,但是沒有srcElement屬性.解法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)來取代IE下的event.srcElement或Firefox下的event.target.

11.window. location.href問題

說明:IE或Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.解：使用window.location來取代window.location.href.

12.模態與非模態視窗問題

說明:IE下,可以透過showModalDialog和showModelessDialog開啟模態和非模態視窗;Firefox下則不能.解決方法:直接使用window.open(pageURL,name,parameters)方式開啟新視窗。

如果需要將子視窗中的參數傳回父視窗,可以在子視窗中使用window.opener來存取父視窗. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing ").value = "Aqing";

13.frame問題

以下面的frame為例:



(1)存取frame物件:IE:使用window.frameId或window.frameName來存取這個frame物件.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中的參數傳回父窗口，可以在frme中使用parent來存取父窗口。例如：parent.document.form1.filename.value="Aqing";

14.找出問題

以下面的getElementByClass為例:

document.getElementByClass("classname1"); 這個功能在IE下不工作，可以用

getElementsByClassName替代，但是這個函數返回的是匹配上NodeList，而不是一個單一對象，如:

複製程式碼 程式碼如下:

var list, index;
list = document.get"ByClass classname1");
for (index = 0; index list[index].setAttribute(/* ... */);
}

諸如此類的問題,最好使用類庫如jQuery, Prototype, Google Closure, etc., 這些類庫兼容所有瀏覽器的. 這將節省很多時間來處理這些兼容性問題。

For instance, in jQuery:

$(".home1").attr(/* ... */);

15.body問題

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

例如：

Firefox：

複製代碼 代碼如下: