6. Entfernen Sie die Knoten „removeNode()“ und „removeChild()“
【Erklärung der Analyse】 appendNode kann normal unter IE und Firefox verwendet werden, RemoveNode kann jedoch nur unter IE verwendet werden.
Die Funktion der Methode „removeNode“ besteht darin, einen Knoten zu löschen. Die Syntax ist „node.removeNode“ (false) oder „node.removeNode“ (true). Der Rückgabewert ist der gelöschte Knoten.
removeNode (false) bedeutet, dass nur der angegebene Knoten gelöscht wird und dann der ursprüngliche untergeordnete Knoten dieses Knotens zum untergeordneten Knoten des ursprünglichen übergeordneten Knotens heraufgestuft wird.
removeNode(true) bedeutet, den angegebenen Knoten und alle seine untergeordneten Knoten zu löschen. Der gelöschte Knoten wird zu einem verwaisten Knoten und verfügt nicht mehr über untergeordnete und übergeordnete Knoten.
[Kompatibilitätsverarbeitung] Es gibt keine RemoveNode-Methode für Knoten. Sie kann nur durch die RemoveChild-Methode ersetzt werden. Kehren Sie zuerst zum übergeordneten Knoten zurück und entfernen Sie dann den zu entfernenden Knoten.
node.parentNode.removeChild(node);
// Um unter IE und Firefox normal zu funktionieren, nehmen Sie den übergeordneten Knoten der vorherigen Ebene und entfernen Sie ihn.
7. Von childNodes erhaltene Knoten
[Analyseerklärung] Die Bedeutung des Indexes von childNodes ist in IE und Firefox unterschiedlich. Sehen Sie sich den folgenden Code an:
- 1
- 3
me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
Bei der Ausführung mit IE bzw. Firefox ist das Ergebnis von IE 3, während das Ergebnis von Firefox 7 ist. Firefox verwendet die DOM-Spezifikation. „#text“ stellt Text dar (eigentlich bedeutungslose Leerzeichen und Zeilenumbrüche usw.). Im IE wird nur Text mit tatsächlicher Bedeutung in „#text“ analysiert ". .
【Kompatible Verarbeitung】
Methode 1: Beim Abrufen untergeordneter Knoten können Sie node.getElementsByTagName() verwenden, um dieses Problem zu vermeiden. Allerdings ist getElementsByTagName offensichtlich nicht so gut wie childNodes für die Durchquerung komplexer DOM-Strukturen, da childNodes die DOM-Hierarchie besser verarbeiten kann.
Methode 2: Wenn Firefox in der tatsächlichen Anwendung untergeordnete Knoten durchläuft, können Sie genauso gut Folgendes in die for-Schleife einfügen:
if(childNode.nodeName=="#text") continue;//Oder verwenden Sie nodeType == 1.
Dadurch können Sie einige Textknoten überspringen.
Erweiterte Lektüre
"Der Unterschied zwischen childNodes in IE und FireFox"
8. Firefox kann innerText nicht unterstützen
[Analyseerklärung] Firefox unterstützt innerText nicht. TextContent berücksichtigt jedoch nicht die Anzeigemethode von Elementen wie innerText und ist daher nicht vollständig mit IE kompatibel. Wenn textContent nicht verwendet wird, kann stattdessen innerHTML verwendet werden, wenn die Zeichenfolge keinen HTML-Code enthält. Sie können auch js verwenden, um eine Methode zum Implementieren zu schreiben. Weitere Informationen finden Sie im Artikel „Implementieren des innerText-Attributs für Firefox“.
[Kompatibilitätsverarbeitung] Kompatibel durch Bestimmung des Browsertyps:
document.getElementById('element').innerText = "mein Text"
} else{
document.getElementById('element').textContent = "mein Text"; 🎜>
4. Ereignisbearbeitung
Wenn bei der Verwendung von JavaScript eine Ereignisverarbeitung erforderlich ist, müssen Sie die Unterschiede bei Ereignissen in verschiedenen Browsern kennen. Es gibt drei Haupt-JavaScript-Ereignismodelle (siehe „Drei Ereignismodelle gleichzeitig unterstützen“), nämlich NN4, IE4 und W3C/Safar.
1. window.event
[Analyseanweisungen] Schauen wir uns zunächst einen Code an
Code kopieren
Der Code lautet wie folgt:
Funktion et(){ Alarm (Ereignis);//IE: [Objekt]}
Das Ergebnis der Ausführung des obigen Codes im IE ist [Objekt], aber er kann nicht in Firefox ausgeführt werden.
Da im IE Ereignisse direkt als Attribut des Fensterobjekts verwendet werden können, wird in Firefox jedoch das W3C-Modell verwendet, das Ereignisse über die Methode der Parameterübergabe weitergibt, was bedeutet, dass Sie einen Parameter dafür bereitstellen müssen Ihre Funktion stellt eine Ereignisantwortschnittstelle bereit.
[Kompatibilitätsverarbeitung] Ereignisbeurteilung hinzufügen, um das richtige Ereignis für verschiedene Browser zu erhalten:
Code kopieren
Der Code lautet wie folgt:
Funktion et(){ evt =evt?evt:(window.event?window.event:null); //Kompatibel mit IE und Firefox
alert(evt);
}
2. Tastaturwert abrufen
[Analyseerklärung] IE und Firefox verfügen über unterschiedliche Methoden zum Abrufen von Tastaturwerten. Es versteht sich, dass event.which unter Firefox dem event.keyCode unter IE entspricht. Zu den Unterschieden siehe „Kompatibilitätstest von keyCode, which und charCode in Tastaturereignissen“
【Kompatible Verarbeitung】
function myKeyPress(evt){
//Kompatibler IE und Firefox erhalten das keyBoardEvent-Objekt
evt = (evt) ? evt : ((window.event) ? window.event : "")
//Kompatibel mit IE und Firefox, um den Schlüsselwert zu erhalten des keyBoardEvent-Objekts
var key = evt.keyCode?evt.keyCode:evt.which
if(evt.ctrlKey && (key == 13 || key == 10)){
// Drücken Sie gleichzeitig Strg und Eingabetaste
//etwas tun;
}
}
3. Ereignisquellen abrufen
[Analyseerklärung] Bei Verwendung der Ereignisdelegation wird die Ereignisquelle abgerufen, um zu bestimmen, von welchem Element das Ereignis stammt. Unter IE verfügt das Ereignisobjekt jedoch über das srcElement-Attribut, unter Firefox jedoch über kein Zielattribut Zielattribute, aber es gibt kein srcElement-Attribut.
【Kompatible Verarbeitung】
ele=function(evt){ // Erfassen Sie das aktuelle Ereignis. Das Aktionsobjekt
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. Ereignisüberwachung
【Analyseerklärung】In Bezug auf das Abhören und Verarbeiten von Ereignissen bietet IE zwei Schnittstellen: attachmentEvent und detachEvent, während Firefox addEventListener und removeEventListener bereitstellt.
[Kompatibilitätsverarbeitung] Die einfachste Kompatibilitätsverarbeitung besteht darin, diese beiden Schnittstellensätze zu kapseln:
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" eventName, function(){
handler.call(elem)} //Die Rückruffunktion call()); wird hier verwendet. Lassen Sie diesen Punkt auf elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false); , eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" eventName, function(){
(), let this point to elem
} else if ( elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
Es ist wichtig zu beachten, dass diese Funktion in der Event-Handler-Funktion unter Firefox auf das überwachte Element selbst verweist, dies ist jedoch unter IE nicht der Fall. Sie können den Callback-Funktionsaufruf verwenden, um den aktuellen Kontext auf das überwachte Element zu verweisen Element.
5. Mausposition
[Analyseerklärung] Unter IE hat das gerade Objekt x-, y-Attribute, aber keine pageX-, pageY-Attribute; unter Firefox hat das gerade Objekt pageX-, pageY-Attribute, aber keine x-, y-Attribute.
【Kompatibilitätsverarbeitung】Verwenden Sie mX (mX = event.x ? event.x : event.pageX;), um event.x unter IE oder event.pageX unter Firefox zu ersetzen. Um die Sache noch komplizierter zu machen, müssen Sie auch die absolute Position berücksichtigen
Code kopieren
x = e.offsetTop;
y = e.offsetTop; warning(" x:" x "," "y:" y);
}
5. Kompatibilitätsverarbeitung anderer Unterschiede
1. XMLHttpRequest
【Analyseerklärung】new ActiveXObject("Microsoft.XMLHTTP"); funktioniert nur im IE, Firefox unterstützt es nicht, aber es unterstützt XMLHttpRequest.
【Kompatible Verarbeitung】
Code kopieren
Der Code lautet wie folgt:
function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP"}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null}
}
if (!xhr)return;
return xhr;
}
2. Modale und nichtmodale Fenster
[Analyseerklärung] Modale und nichtmodale Fenster können über showModalDialog und showModelessDialog im IE geöffnet werden, Firefox unterstützt dies jedoch nicht.
【Lösung】Verwenden Sie window.open(Seiten-URL, Name, Parameter) direkt, um ein neues Fenster zu öffnen. Wenn Sie Parameter übergeben müssen, können Sie Frame oder Iframe verwenden.
3. input.type-Attributproblem
Das Attribut input.type ist unter IE schreibgeschützt, kann aber unter Firefox geändert werden
4. Optionsoperation für ausgewähltes Element
Um Optionen festzulegen, verfügen IE und Firefox über unterschiedliche Schreibmethoden:
Firefox: kann direkt eingestellt werden
option.text = 'foooooooo';
IE: kann nur eingestellt werden
option.innerHTML = 'fooooooo';
Methode zum Löschen einer ausgewählten Option:
Firefox: Ja
select.options.remove(selectedIndex);
IE7: Es kann verwendet werden
select.options[i] = null;
IE6: Muss schreiben
select.options[i].outerHTML = null;
5. Analyse von Bildobjekt-Alt und -Titel
[Analyseerklärung] Das img-Objekt hat zwei Attribute, alt und title. Der Unterschied besteht darin, dass alt: eine Eingabeaufforderung ist, wenn das Foto nicht vorhanden ist oder ein Ladefehler vorliegt.
title: Tipp-Beschreibung des Fotos. Wenn im IE kein Titel definiert ist, kann auch alt als Tipp für img verwendet werden. In Firefox werden jedoch beide genau wie im Standard definiert verwendet
Beim Definieren des img-Objekts.
【Kompatibilitätsverarbeitung】Es ist am besten, alle Alt- und Titelobjekte zu schreiben, um sicherzustellen, dass sie in verschiedenen Browsern normal verwendet werden können.
6. img src Aktualisierungsproblem
[Analyseanweisungen] Schauen wir uns zuerst den Code an:
Unter IE kann dieser Code zum Aktualisieren des Bildes verwendet werden, jedoch nicht unter Firefox. Hauptsächlich ein Caching-Problem.
[Kompatibilitätsverarbeitung] Fügen Sie nach der Adresse eine Zufallszahl hinzu, um das Problem zu lösen:
Zusammenfassung
Es gibt viele Unterschiede in Javascript zwischen IE und Firefox. Um Kompatibilität zu erreichen, ist es meiner Meinung nach notwendig, einige gängige in einer js-Bibliothek zu organisieren, wie z. B. DOM-Operationen, Ereignisverarbeitung, XMLHttpRequest-Anfragen usw., oder Sie können Ich entscheide mich auch für die Verwendung einiger vorhandener Bibliotheken (z. B. jQuery, YUI, ExtJs usw.), aber ich denke, dass es immer noch notwendig ist, diese Unterschiede zu verstehen, was für uns hilfreich sein wird, um an Kompatibilitäts- und Benutzerfreundlichkeitscode teilzunehmen.
Es gibt immer mehr Lösungen als Probleme. Egal wie frustrierend die Browserkompatibilität ist, Frontend-Entwickler können sie immer lösen!