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

geändert werden

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

Unter IE können Sie nur das Schlüsselwort var verwenden, um Konstanten zu definieren

Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren.

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

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

a) Auf das Rahmenobjekt zugreifen

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

Firefox: Auf dieses Frame-Objekt kann nur mit window.frameName zugegriffen werden

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

Funktioniert sowohl im IE als auch in Firefox

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

um den Inhalt des Rahmens zu wechseln;

Wenn Sie die Parameter im Frame zurück an das übergeordnete Fenster übergeben müssen (beachten Sie, dass es sich nicht um einen Öffner, sondern um ein übergeordnetes Fenster handelt), können Sie „parent“ im Frame verwenden, um auf das übergeordnete Fenster zuzugreifen. Zum Beispiel:

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

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.

Die in diesem Artikel vorgestellte Zusammenfassung der JavaScript-Browserkompatibilität und die allgemeine Browserkompatibilitätsanalyse werden Ihnen hier hoffentlich hilfreich sein.