Résumé de la compatibilité du navigateur JavaScript et compétences courantes en matière d'analyse de compatibilité des navigateurs_javascript

Cet article est une compilation quotidienne de l'éditeur de Script House sur les problèmes de compatibilité js et l'analyse de compatibilité des navigateurs couramment utilisés tels que IE et Firefox. Les amis qui souhaitent connaître la compatibilité des navigateurs js devraient apprendre ensemble !

1. enfants et childNodes

Le comportement des enfants, des childNodes fournis par IE et des childNodes sous Firefox est différent. Les ChildNodes sous Firefox compteront les nouvelles lignes et les espaces comme des nœuds enfants du nœud parent, alors que les childNodes et les enfants d'IE ne le feront pas. Par exemple :

<div id="dd">
<div>yizhu2000</div>
</div> 

Le div avec d comme dd est visualisé en utilisant childNodes sous IE Le nombre de nœuds enfants est de 1, tandis que sous ff il est de trois. Nous pouvons voir dans la visionneuse dom de Firefox que ses childNodes sont ["n", div. , "n"].

Pour simuler l'attribut children dans Firefox, nous pouvons faire ceci :

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
} 

2. Incidents de Firefox et ie

window.event ne peut être utilisé que sous IE, mais pas sous Firefox En effet, l'événement de Firefox ne peut être utilisé que sur la scène où l'événement se produit. Firefox doit ajouter des événements de la source pour le passage des paramètres. IE ignore ce paramètre et utilise window.event pour lire l'événement.

Par exemple, voici comment obtenir la position de la souris sous IE :

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

doit être remplacé par

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script> 

peut être utilisé dans les deux navigateurs

3.Problème d'acquisition d'objet HTML

Méthode d'acquisition FireFox document.getElementById("idName")

c'est-à-dire, utilisez document.idname ou document.getElementById("idName")

Solution : utilisez document.getElementById("idName");

4. problème de const

Sous Firefox, vous pouvez utiliser le mot-clé const ou le mot-clé var pour définir des constantes

Sous IE, vous ne pouvez utiliser que le mot-clé var pour définir des constantes

Solution : utilisez le mot-clé var uniformément pour définir des constantes.

Problème 5.frame

Prenons le cadre suivant comme exemple :

<frame src="xxx.html" id="frameId" name="frameName" /> 

a) Accéder à l'objet cadre

IE : utilisez window.frameId ou window.frameName pour accéder à cet objet frame. frameId et frameName peuvent avoir le même nom ;

Firefox : cet objet frame n'est accessible qu'en utilisant window.frameName

;

De plus, vous pouvez utiliser window.document.getElementById("frameId") pour accéder à cet objet frame dans IE et Firefox

b) Changer le contenu du cadre

Fonctionne à la fois dans IE et Firefox

window.document.getElementById("testFrame").src = "xxx.html" ou window.frameName.location = "xxx.html"

pour changer le contenu du cadre

Si vous devez transmettre les paramètres du cadre à la fenêtre parent (notez qu'il ne s'agit pas d'un ouvreur, mais d'un parent), vous pouvez utiliser parent dans le cadre pour accéder à la fenêtre parent. Par exemple :

parent.document.form1.filename.value="Aqing"

6. Problème corporel

Le corps de Firefox existe avant que la balise body soit entièrement lue par le navigateur ; tandis que le corps d'IE doit exister après que la balise body soit entièrement lue par le navigateur

 ;

7. La différence entre l'élément parent (parentElement) de Firefox et IE

IE : obj.parentElement

firefox:obj.parentNode

Solution : étant donné que Firefox et IE prennent en charge DOM, ils utilisent tous obj.parentNode

8.Problème de texte intérieur

innerText peut fonctionner normalement dans IE, mais innerText ne fonctionne pas dans FireFox, vous devez utiliser textContent

Solution :

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
} 

9. La différence entre AJAX et XMLHTTP

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 

Remarque : dans IE, le contenu de la méthode xmlhttp.send(content) peut être vide, mais dans Firefox, il ne peut pas être nul. Send("") doit être utilisé, sinon une erreur 411 se produira.

Concernant le résumé de la compatibilité du navigateur JavaScript et l'analyse courante de la compatibilité des navigateurs présentés dans cet article, l'éditeur vous le présentera ici, j'espère qu'il vous sera utile !