在開發多語言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: