JavaScript中關於兼容性能的具體分析

1. document.form.item 問題
問題：
#程式碼中存在

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">document.formName.item("itemName")<br/></span>

這樣的語句，不能在FF下執行
解決方法：
改用 

#

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">document.formName.elements["elementName"]<br/></span>

2. 集合類別物件問題
問題：
程式碼中許多集合類別物件取用時使用()，IE能接受，FF不能
解決方法：
改用 [] 作為下標運算，範例：

document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event
問題：
使用 window.event 無法在FF上執行
解決方法：
FF的event 只能在事件發生的現場使用，此問題暫無法解決。可以把event 傳到函數裡變通解決：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">onMouseMove = "functionName(event)"<br/>function functionName (e) {<br/>    e = e || window.event;<br/>    ......<br/>}<br/></span>

4. HTML物件的id 作為物件名稱的問題
問題：
在IE中，HTML物件的ID 可以作為document 的下屬物件變數名稱直接使用，在FF中不能
解決方法：
使用物件變數時全部用標準的 getElementById(" idName")

5. 用idName 字串取得物件的問題
問題：
在IE中，利用eval("idName") 可以取得id 為idName 的HTML對象，在FF中不能
解決方法：
用 getElementById("idName") 取代eval("idName")

6. 變數名稱與某HTML對象id 相同的問題
問題：
在FF中，因為物件id 不作為HTML物件的名稱，所以可以使用與HTML物件id 相同的變數名，IE中不能
解法：
在宣告變數時，一律加上 var ，以避免歧義，這樣在IE中亦可正常運作
最好不要取與HTML對象id 相同的變數名，以減少錯誤

7. event.x 與event.y 問題
問題：
在IE中，event 物件有x,y屬性，FF中沒有
解決方法：
在FF中，與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

8. 關於frame
問題：
#在IE中可以用window.testFrame 取得該frame，FF中不行
解決方法：

#

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.top.document.getElementById("testFrame").src = &#39;xx.htm&#39;<br/>window.top.frameName.location = &#39;xx.htm&#39;<br/></span>

9. 取得元素的屬性
#在FF中，自己定義的屬性必須getAttribute() 取得

10. 在FF中沒有parentElement，parement.children 而用parentNode，parentNode.childNodes
問題：
childNodes 的下標的意思在IE和FF中不同，FF的childNodes 中會插入空白文字節點
解決方法：
可以透過 node.getElementsByTagName() 來迴避這個問題
問題：
當html中節點缺失時，IE和FF對parentNode 的解釋不同，例如：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;"><form><br/><table><br/><input/><br/></table><br/></form><br/></span>

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点
问题：
FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题
问题：
在IE中不能使用 const 关键字
解决方法：
以 var 代替

12. body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
解决方法：
一切在body上插入节点的动作，全部在onload后进行

13. url encoding
问题：
一般FF无法识别js中的&
解决方法：
在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

15. 元素属性
IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 p 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17. 调用子框架或者其它框架中的元素的问题
在IE中，可以用如下方法来取得子元素中的值

document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName

在FF中则需要改成如下形式来执行，与IE兼容：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.frames["frameName"].contentWindow.document.elementName<br/>window.frames["frameName"].document.elementName<br/></span>

18. 对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.style.height = imgObj.height + "px";<br/></span>

19. innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">var source = e.target || e.srcElement;<br/>var target = e.relatedTarget || e.toElement;<br/></span>

21. 禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: 

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.onselectstart = function() {return false;}<br/></span>

FF: -moz-user-select:none;
22. 捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.setCapture(); <br/>obj.releaseCapture();</span>

FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>if (!window.captureEvents) {<br/>       o.setCapture();<br/>}else {<br/>       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>}<br/>if (!window.captureEvents) {<br/>       o.releaseCapture();<br/>}else {<br/>       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>}</span>

以上是JavaScript中關於兼容性能的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！