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 ;

;

b) Changer le contenu du cadre

6. Problème corporel

 ;

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

IE : obj.parentElement

firefox:obj.parentNode

8.Problème de texte intérieur

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");
}