Javascript 多瀏覽器兼容性問題及解決方案
2024-05-06 14:12:18
供稿：網友
CSS 多瀏覽器兼容性問題及解決方案
一、document.formName.item(”itemName”) 問題
問題說明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解決方法：統一使用document.formName.elements["elementName"]。
二、集合類對象問題
問題說明：IE下，可以使用 () 或 [] 獲取集合類對象；Firefox下，只能使用 [ ]獲取集合類對象。
解決方法：統一使用 [] 獲取集合類對象。
三、自定義屬性問題
問題說明：IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。
解決方法：統一通過 getAttribute() 獲取自定義屬性。
四、eval(”idName”)問題
問題說明：IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 來取得 id 為 idName 的HTML對象；Firefox下，只能使用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。
解決方法：統一用 getElementById(”idName”) 來取得 id 為 idName 的HTML對象。
五、變量名與某HTML對象ID相同的問題
問題說明：IE下，HTML對象的ID可以作為 document 的下屬對象變量名直接使用，Firefox下則不能；Firefox下，可以使用與HTML對象ID相同的變量名，IE下則不能。
解決方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML對象ID相同的變量名，以減少錯誤；在聲明變量時，一律加上var關鍵字，以避免歧義。
六、const問題
問題說明：Firefox下，可以使用const關鍵字或var關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量。
解決方法：統一使用var關鍵字來定義常量。
七、input.type屬性問題
問題說明：IE下 input.type 屬性為只讀；但是Firefox下 input.type 屬性為讀寫。
解決辦法：不修改 input.type 屬性。如果必須要修改，可以先隱藏原來的input，然后在同樣的位置再插入一個新的input元素。
八、window.event問題
問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
九、event.x與event.y問題
問題說明：IE下，even對象有x、y屬性，但是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，但是沒有x、y屬性。
