Zusammenfassung der JavaScript-Browserkompatibilität und allgemeine Browserkompatibilitätsanalyse_Javascript-Kenntnisse

Dieser Artikel ist eine tägliche Zusammenstellung des Herausgebers von Script House über JS-Kompatibilitätsprobleme und Kompatibilitätsanalysen häufig verwendeter Browser wie IE und Firefox. Freunde, die an Kenntnissen über JS-Browserkompatibilität interessiert sind, sollten gemeinsam lernen!

1. Kinder und ChildNodes

Das Verhalten von Kindern, vom IE bereitgestellten ChildNodes und ChildNodes unter Firefox unterscheidet sich. Zum Beispiel:

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

Das Div mit d als dd wird mit childNodes unter IE angezeigt. Die Anzahl der untergeordneten Knoten beträgt 1, während es unter ff drei sind. Aus dem Dom-Viewer von Firefox können wir ersehen, dass seine childNodes ["n", div , "N"].

Um das Kinderattribut in Firefox zu simulieren, können wir Folgendes tun:

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. Vorfälle von Firefox und IE

window.event kann nur unter IE verwendet werden, nicht jedoch unter Firefox. Dies liegt daran, dass das Ereignis von Firefox nur an der Stelle verwendet werden kann, an der das Ereignis auftritt. Firefox muss zur Parameterübergabe Ereignisse aus der Quelle hinzufügen. IE ignoriert diesen Parameter und verwendet window.event, um das Ereignis zu lesen.

So ermitteln Sie beispielsweise die Mausposition unter IE:

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

muss in

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

kann in beiden Browsern verwendet werden

3.HTML-Objekterfassungsproblem

FireFox-Erfassungsmethode document.getElementById("idName")

dh verwenden Sie document.idname oder document.getElementById("idName")

Lösung: Verwenden Sie document.getElementById("idName");

4. Konstantenproblem

Unter Firefox können Sie das Schlüsselwort const oder das Schlüsselwort var verwenden, um Konstanten zu definieren;

5.Frame-Problem Nehmen Sie den folgenden Rahmen als Beispiel:

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

IE: Verwenden Sie window.frameId oder window.frameName, um auf dieses Frame-Objekt zuzugreifen. FrameId und FrameName können denselben Namen haben

Darüber hinaus können Sie window.document.getElementById("frameId") verwenden, um sowohl im IE als auch in Firefox auf dieses Frame-Objekt zuzugreifen

b) Rahmeninhalt wechseln

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

6. Körperproblem

Der Körper von Firefox existiert, bevor das Body-Tag vollständig vom Browser gelesen wird; der Körper von IE muss jedoch vorhanden sein, nachdem das Body-Tag vollständig vom Browser gelesen wurde 7. Der Unterschied zwischen dem übergeordneten Element (parentElement) von Firefox und IE

IE: obj.parentElement

firefox:obj.parentNode
Lösung: Da sowohl Firefox als auch IE DOM unterstützen, verwenden sie alle obj.parentNode

8.InnerText-Problem

innerText kann im IE normal funktionieren, innerText funktioniert jedoch nicht in Firefox. Sie müssen textContent verwenden Lösung:

9. Der Unterschied zwischen AJAX und XMLHTTP

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

Hinweis: Im IE kann der Inhalt der Methode xmlhttp.send(content) leer sein, aber in Firefox darf er nicht null sein. Send("") sollte verwendet werden, da sonst ein 411-Fehler auftritt.