Analyse détaillée des performances de compatibilité en JavaScript

1. Problème document.form.item
Problème :
Il y a

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

comme ça dans l'instruction de code ne peut pas être exécuté sous FF
Solution :
Utilisez à la place

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

2. Classe de collection Problème d'objet
Problème :
De nombreux objets de collection dans le code utilisent (), qui est accepté par IE mais pas par FF
Solution : utilisez
à la place > [ ] comme opération d'indice, par exemple :

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

3. window.event problème :

utilise window event ne peut pas. être exécuté sur FF Solution :
L'événement de FF ne peut être utilisé que sur la scène où l'événement se produit. Ce problème ne peut pas encore être résolu. Vous pouvez transmettre l'événement à la fonction pour contourner le problème :

<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. Le problème de l'utilisation de l'identifiant de l'objet HTML comme nom d'objet Problème :
Dans
IE, l'ID de l'objet HTML peut être utilisé directement comme nom de variable d'objet subordonné du document, mais ne peut pas être utilisé dans FF Solution : .
Utilisez le standard
getElementById lors de l'utilisation de variables d'objet. ("idName")5 Le problème de l'utilisation de la chaîne idName pour obtenir l'objet
Problème :

. Dans
IE, vous pouvez utiliser eval("idName") pour obtenir l'identifiant car L'objet HTML de idName ne peut pas être utilisé dans FF Solution :
Utilisez
getElementById("idName" ) au lieu de eval("idName")6. Nom de la variable et certains Même problème avec l'identifiant de l'objet HTML
Problème :

Dans
FF, car l'identifiant de l'objet n'est pas utilisé comme nom de l'objet HTML, vous pouvez utiliser le même nom de variable que l'identifiant de l'objet HTML, mais il ne peut pas être utilisé dans IESolution :
Lors de la déclaration des variables, ajoutez toujours
var pour éviter toute ambiguïté, afin qu'il puisse également fonctionner normalement dans IE Il est préférable de ne pas utiliser
L'identifiant de l'objet HTML a le même nom de variable pour réduire les erreurs 7. et event.y problèmes
Problème :

Dans
IE, l'objet événement a un attribut x, y, il n'y a pas de dans FF Solution :
Dans
FF, l'équivalent de event.x est event.pageX, mais event.pageX n'a ​​pas dans IE Par conséquent,
event.clientX est utilisé à la place de event.x. dans IE. event.clientX a une différence subtile avec event.pageX, c'est-à-dire que la barre de défilement devrait être exactement la même, ce qui peut ressembler à ceci :
mX = event.x ? x : event.pageX;

Ensuite utilisez
mX pour remplacer event.x8 Concernant le problème de frame
:

Vous pouvez utiliser window. .testFrame pour obtenir le cadre dans
IE, mais pas dans FFSolution :

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

Récupérer les attributs de l'élément

Dans
FF, les attributs que vous définissez doivent être obtenus par getAttribute()10. Dans FF, il n'y a pas de problème parentElement, parement.children mais parentNode, parentNode.childNodes
:
La signification de l'indice de childNodes est différente dans IE et FF. Des nœuds de texte vierges seront insérés dans les childNodes de FF
Solution :

Vous pouvez éviter ce problème via le nœud
. getElementsByTagName() Problème :
Lorsque le nœud dans
html est manquant, IE et FF interprètent parentNode différemment, par exemple :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!