Detaillierte Analyse der Kompatibilitätsleistung in JavaScript

1. document.form.item-Problem
Problem:
Es gibt

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

so in der Code-Anweisung kann nicht unter FF ausgeführt werden
Lösung:
Verwenden Sie stattdessen

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

2. Sammlungsklasse Objektproblem
Problem:

Viele Sammlungsobjekte im Code verwenden (), was vom IE, aber nicht von FF akzeptiert wirdLösung: Verwenden Sie stattdessen

> [ ] als Indexoperation, zum Beispiel:

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

3. window.event

Problem:
verwendet
window event nicht auf FF ausgeführt werden Lösung: Das FF-Ereignis kann nur an der Stelle verwendet werden, an der das Ereignis auftritt. Dieses Problem kann noch nicht gelöst werden. Sie können das Ereignis an die Funktion übergeben, um das Problem zu umgehen:

<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. Das Problem der Verwendung der ID des HTML-Objekts als Objektname

Problem:
In
IE kann die ID des HTML-Objekts direkt als untergeordneter Objektvariablenname des Dokuments verwendet werden, kann jedoch nicht in FF verwendet werden: Verwenden Sie die Standard-
getElementById, wenn Sie Objektvariablen verwenden.
Das Problem bei der Verwendung der idName-Zeichenfolge zum Abrufen des Objekts.
In
IE können Sie eval("idName") verwenden, um die ID als abzurufen. Das HTML-Objekt von idName kann in FF nicht verwendet werden.
Lösung:
Verwenden Sie getElementById("idName" ) anstelle von eval("idName")

6. Variablenname und bestimmtes. Gleiches Problem mit HTML-Objekt-ID Problem:
In
FF, weil die Objekt-ID nicht vorhanden ist Als Name des HTML-Objekts verwendet, können Sie denselben Variablennamen wie die HTML-Objekt-ID verwenden, er kann jedoch nicht im IE verwendet werden
Lösung:
Fügen Sie beim Deklarieren von Variablen immer var hinzu um Mehrdeutigkeiten zu vermeiden, damit es auch im IE normal ausgeführt werden kann

Es ist am besten, nicht zu verwenden HTML-Objekt-ID hat denselben Variablennamen, um Fehler zu reduzieren
7 und event.y-Probleme Problem:
In
IE hat das Ereignisobjekt das x-, y-Attribut, es gibt kein
in FF Lösung:
In FF, das Äquivalent von event.x ist event.pageX, aber event.pageX hat kein

im IE. Daher wird event.clientX anstelle von event.x verwendet. Es gibt auch diese Variable im IE. event.clientX hat einen subtilen Unterschied zu event.pageX, das heißt, die Bildlaufleiste
sollte genau so sein: mX = event.x ? x : event.pageX;
Dann verwenden Sie
mX, um event.x zu ersetzen

8. Zum Problem des Frames:
Sie können window verwenden .testFrame, um den Frame in
IE, aber nicht in FF zu erhalten
Lösung:


9. Holen Sie sich die Attribute des Elements

<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>

In

FF müssen die von Ihnen definierten Attribute durch getAttribute() abgerufen werden
10 In FF gibt es kein parentElement, parement.children, sondern parentNode, parentNode.childNodesProblem: Die Bedeutung des Index von childNodes ist in IE und FF unterschiedlich. Leere Textknoten werden in die childNodes von FF eingefügt.
Lösung:

Sie können dieses Problem durch den Knoten
vermeiden. getElementsByTagName()
Problem:
Wenn der Knoten in html fehlt, interpretieren IE und FF parentNode unterschiedlich, zum Beispiel:

<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>

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Kompatibilitätsleistung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!