1. Problème de recherche d'éléments
1. document.all[nom]
(1)Problème existant : Firefox ne prend pas en charge document.all[name]
(2) Solution : utilisez plutôt getElementsByName(name), getElementById(id), etc.
2. Problème d'objet de collection
(1) Problème existant : vous pouvez utiliser () pour accéder à de nombreux objets de collection dans IE, mais vous ne pouvez utiliser que [] dans Firefox.
Par exemple : document.forms("formName") peut être utilisé dans IE pour renvoyer le formulaire nommé "formName", mais cela ne fonctionne pas dans Firefox.
(2) Solution : utilisez [], dans l'exemple ci-dessus, il peut être remplacé par document.forms["formName"]
3. L'ID de l'élément HTML est visible en JavaScript
(1) Problème existant : l'ID dans l'élément HTML dans IE peut être utilisé directement comme nom de variable d'objet subordonné du document. Pas possible dans Firefox.
(2) Solution : utilisez getElementById("idName") au lieu de idName comme variable d'objet.
4. eval(idName) obtient l'objet
(1) Problème existant : dans IE, vous pouvez utiliser eval(idName) pour obtenir l'objet HTML avec l'ID idName, mais pas dans Firefox.
(2) Solution : utilisez getElementById(idName) au lieu de eval(idName).
5. Le nom de la variable est le même qu'un ID d'objet HTML
(1) Problème existant : dans Firefox, étant donné que l'ID de l'objet n'est pas utilisé comme nom de l'objet HTML, vous pouvez utiliser le même nom de variable que l'ID de l'objet HTML, mais pas dans IE.
(2) Solution : lors de la déclaration de variables, ajoutez toujours var pour éviter toute ambiguïté, afin qu'il puisse également s'exécuter normalement dans IE. De plus, il est préférable de ne pas prendre le même nom de variable que l'identifiant de l'objet HTML afin de réduire les erreurs.
Remarque : 3, 4 et 5 appartiennent tous à la même catégorie de questions.
6. Cadre
(1) Problème existant : dans IE, vous pouvez utiliser window.top.frameId et window.top.frameName pour obtenir la fenêtre représentée par le cadre. Dans Firefox, vous ne pouvez utiliser que window.top.frameName.
(2) Solution : définissez l'ID et le nom du cadre pour qu'ils soient identiques et utilisez window.top.frameName pour accéder au cadre.
2.Opération DOM
1. Définissez le contenu du texte de l'élément.
(1) Problème existant : IE utilise innerText, tandis que Firefox utilise textContent pour définir le contenu textuel des éléments.
(2) Solution : si le contenu du texte ne contient pas de caractères spéciaux tels que "<" et ">", vous pouvez utiliser innerHTML. Sinon, vous pouvez utiliser :
var child = elem.firstChild;
if (child != null) elem.removeChild(child);
elem.appendChild(document.createTextNode(content));
2. parentElement, parent.enfants
(1) Problème existant : IE peut utiliser parentElement pour obtenir le nœud parent et parent.children pour obtenir tous les nœuds enfants du nœud. Non pris en charge par Firefox.
(2) Solution : utilisez parentNode et parent.childNodes.
3. Explication des childNodes.
(1) Problème existant : l'interprétation de childNodes est différente dans IE et Firefox IE n'inclura pas de nœuds de texte vides, mais Firefox le fera.
(2) Solution : utilisez childNodes pour filtrer les nœuds de texte, comme suit :
var children = elem.childNodes;
for (i = 0; i < children.length; i++) {
if (children[i].nodeType != 3) { // 过滤文本结点
// ...
}
}
4. Explication de document.getElementsByName.
(1) Problème existant : getElementsByName dans IE vérifiera uniquement les éléments et , mais sous Firefox, il vérifiera tous les éléments.
(2) Solution : n'utilisez pas getElementsByName pour vérifier des éléments autres que et . Si vous souhaitez obtenir un seul élément, essayez d'utiliser getElementById.
5. Explication de document.getElementById.
(1) Problème existant : getElementById dans IE vérifie non seulement l'attribut Id, mais vérifie également l'attribut Name. Lorsque l'attribut Name correspond au paramètre, l'élément sera également renvoyé. Dans Firefox, seul l'attribut Id est vérifié.
(2) Solution : essayez de conserver l'identifiant et le nom identiques et ne faites pas en sorte que l'attribut name d'un élément soit identique à l'attribut id d'un autre élément.
3. Événements
1. Problèmes Event.x et event.y
(1) Problème existant : dans IE, l'objet événement a les attributs x, y, mais pas dans Firefox.
(2) Solution : Dans Firefox, l'équivalent de event.x est event.pageX. Peut être utilisé :
mX = événement.x ? événement.x : événement.pageX;
(1) Problème existant : l'utilisation de window.event ne peut pas s'exécuter sur Firefox
(2)Solution :
Code original (peut être exécuté dans IE) :
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
3. attachEvent和addEventListener
(1)现有问题：IE中使用attachEvent来添加事件，Firefox中使用addEventListener。
(2)解决方法：如下，注意事件参数的区别，一个是click，一个是onclick。
if (document.attachEvent) document.attachEvent("click", clickHandler,false);
else document.addEventListener("onclick",clickHandler);
四、语法
1. const
(1)现有问题：在IE中不能使用const关键字。如const constVar = 32;在IE中这是语法错误。
(2)解决方法：不使用const，以var代替。
2. 多余的逗号
(1)现有问题：firefox中对象文字常量容许多余的逗号，在IE中不允许。下面语句在IE中非法。
var obj = { 'key' : 'aaa', }
(2)解决方法：去掉多余逗号。
五、XML
1. 创建XMLHttpRequest
(1)现有问题：Firefox使用XMLHttpRequest，IE使用ActiveXObject。
(2)解决方法：
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
2. 创建DOM
(1)现有问题：Firefox和IE创建DOM的方式不同。
(2)解决方法：
function createXmlDom() {
var oXmlDom;
if (Window.ActiveXObject) { // IE
oXmlDom = new ActiveXObject("Microsoft.XmlDom");
} else { // Firefox
oXmlDom = document.implementation.createDocument("", "", null);
}
}
3. 加载XML
(1)现有问题：如果要加载外部文件IE和Firefox都可以用:
oXmlDom.async=false; // 这在Firefox中是必须的
oXmlDom.load("test.xml");
但是它们加载xml字符串的方式不一样，IE中直接可以使用oXmlDom.loadXML("
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString("
(2)解决方法：比较好的方法是给Firefox产生的XMLDom加上loadXML方法：
if (isFirefox) { // 需要浏览器检测
Document.prototype.loadXML = function(sXml) {
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXml, "text/xml");
while (this.firstChild) this.removeChild(this.firstChild);
for (var i = 0; i < oXmlDom.childNodes.length; i++) {
var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
this.appendChild(oNewNode);
}
}
}
这样在IE和Firefox就可以调用loadXML方法了。
4. XPath支持
(1)现有问题：IE中可以直接用XmlDOM的selectNodes来根据XPath表示式来选择结点，Firefox则比较复杂，需要使用XPathEvaluator。
IE:
var lstNodes = oXmlDom.documentElement.selectNodes("employee/name");
for (var i = 0; i < lstNodes.length; i++) {
alert(lstNodes[i].firstChild.nodeValue);
}
Firefox:
var oEvaluator = new XPathEvaluator();
var oResult = oEvaluator.evaluate("employee/name", oXmlDom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var oElement = oResult.iterateNext();
while (oElement) {
alert(oElement.firstChild.nodeValue);
oElement = oResult.iterateNext();
}
(2)解决方法：比较好的方法给Firefox的Element添加selectNodes方法。
if (isFirefox) { // 需要浏览器检测
Element.prototype.selectNodes = function(sXPath) {
var oEvaluator = new XPathEvaluator();
var oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var aNodes = new Array();
if (oResult != null) {
var oElement = oResult.iterateNext();
while (oElement) {
aNodes.push(oElement);
oElement = oResult.iterateNext();
}
}
return aNodes;
}
}
这样在IE和Firefox中就都可以调用selectNodes方法了。
5. XSLT支持
(1)现有问题：IE中可以使用XmlDOM的transferNode方法将其转换成html，而Firefox需要使用XSLTProcessor。
IE:
oXmlDom.load("employee.xml");
oXslDom.load("employee.xslt");
var sResult=oXmlDom.transformNode(oXslDom);
Firefox:
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(oXslDom);
var oResultDom = oProcessor.transformToDocument(oXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
alert(sXml);
(2)解决方法：比较好的方法给Firefox的Node添加transferNode方法。
if (isFirefox) { // 需要浏览器检测
Node.prototype.transformNode = function(oXslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(oXslDom);
var oResultDom = oProcessor.transformToDocument(oXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
}
这样在IE和Firefox中就都可以调用transferNode方法了。
以上就是针对浏览器兼容的JS写法的总结，希望对大家的学习有所帮助。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
