Dieser Artikel fasst und analysiert gemeinsame Kompatibilitätsprobleme in JavaScript in IE und Firefox -Browsern. Teilen Sie es für Ihre Referenz wie folgt weiter:
Bilden
document.formname.item ("itemName")IE: Sie können document.formName.item ("itemName") oder document.formName.elements ["elementname" verwenden]
Firefox: Nur document.formName.elements ["elementname"]
Lösung: Verwenden Sie document.formName.elements ["elementname"]
Sammlungsklassenobjekte
IE: Sie können () oder [] verwenden, um Sammlungsklassenobjekte zu erhalten.
Firefox: Verwenden Sie nur [], um Sammlungsklassenobjekte zu erhalten.
Lösung: Verwenden Sie [], um Einheitliche Klassenobjekte auf einheitliche Weise zu erhalten.
Benutzerdefinierte Eigenschaften
IE: Sie können die Methode zum Erhalten regelmäßiger Attribute verwenden, um benutzerdefinierte Attribute zu erhalten, oder Sie können GetAttribute () verwenden, um benutzerdefinierte Attribute zu erhalten
Firefox: Sie können nur GetAttribute () verwenden, um benutzerdefinierte Eigenschaften zu erhalten.
Lösung: Erhalten Sie gleichmäßig benutzerdefinierte Attribute über getAttribute ().
Elementerfassung
eval ("idname")IE: Sie können Eval ("IDName") oder getElementById ("idName") verwenden, um ein HTML -Objekt mit IDNAME zu erhalten.
Firefox: Sie können nur GetElementById ("IDName") verwenden, um HTML -Objekte mit IDNAME mit IDNAME zu erhalten.
Lösung: Verwenden Sie GetElementById ("IDName"), um das HTML -Objekt mit ID als IDName zu erhalten.
Doppelte Benennung
Problem mit demselben variablen Namen wie eine bestimmte HTML -Objekt -ID
IE: Die ID des HTML -Objekts kann direkt als variabler Name des untergeordneten Objekts des Dokuments verwendet werden, aber es kann jedoch nicht unter Firefox verwendet werden.
Firefox: Sie können denselben variablen Namen wie die HTML -Objekt -ID verwenden, aber Sie können nicht in IE.
Problemumgehung: Verwenden Sie document.getElementById ("idName") anstelle von document.idname. Es ist am besten, keine Variablennamen mit derselben HTML -Objekt -ID zu nehmen, um Fehler zu reduzieren. Fügen Sie beim Deklarieren von Variablen VAR hinzu, um Mehrdeutigkeiten zu vermeiden.
Const
IE: Verwenden Sie nur das VAR -Schlüsselwort, um Variablen zu definieren.
Firefox: Sie können das Schlüsselwort const oder das VAR -Schlüsselwort verwenden, um Variablen zu definieren.
Lösung: Verwenden Sie das VAR -Schlüsselwort, um Variablen einheitlich zu definieren.
input.type
Eingabe -Attributproblem
IE: Das Attribut "Input.ype" ist schreibgeschützt.
Firefox: Das Attribut für Eingabe.Typen wird gelesen und schreiben.
window.event
window.event kann nur unter dem IE, nicht in Firefox, laufen, da das Firefox -Ereignis nur in der Szene verwendet werden kann, in der das Ereignis auftritt.
Firefox: Das Ereignis muss aus der Quelle für den Parameterübergang hinzugefügt werden. IE ignoriert diesen Parameter und verwendet window.event, um das Ereignis zu lesen.
Lösung:
<script Language = "JavaScript"> Funktion Fun (e) {e = e? e: (window.event? window.event: null); } </script>event.x und event.y
Beschreibung: Unter IE hat das gleichmäßige Objekt X- und Y -Attribute, aber keine Pagex- und Seitenattribute; Unter Firefox verfügt das gleichmäßige Objekt über Pagex- und Seitenattribute, hat jedoch keine X- und Y -Attribute.
Lösung: Verwenden Sie MX (mx = event.x? Event.x: event.pagex;) anstelle von event.x unter IE oder Event.pagex unter Firefox.
event.srcelement
IE: Das Ereignisobjekt hat eine Srcelement -Eigenschaft, hat jedoch keine Zieleigenschaft.
Firefox: Auch Objekt hat eine Zieleigenschaft, aber keine Srcelement -Eigenschaft.
Lösung: Verwenden Sie OBJ (OBJ = Event.srcElement? Event.srcelement: event.target;) anstelle von event.srcelement unter IE oder Ereignis.target unter Firefox. Bitte achten Sie auch auf die Kompatibilitätsprobleme des Ereignisses.
window.location.href
IE oder Firefox2.0.x: Sie können window.location oder window.location.href;
Firefox1.5.x: Nur Fenster.location wird verwendet
Problemumgehung: Verwenden Sie Window.location anstelle von window.location.href.
Modale und nicht modale Fenster
IE: Modale und nicht modale Fenster können über Showmodaldialog und ShowmodelessDialog geöffnet werden
Firefox: Nein!
Lösung: Verwenden Sie Window.open (Pageurl, Name, Parameter), um ein neues Fenster zu öffnen.
Wenn Sie die Parameter im untergeordneten Fenster zurück zum übergeordneten Fenster übergeben müssen, können Sie das Fenster verwenden. Opener im untergeordneten Fenster, um auf das übergeordnete Fenster zuzugreifen. Zum Beispiel: var parwin = window.opener; parwin.document.getElementById ("aqing"). Value = "aqing";
rahmen
Der folgende Rahmen ist ein Beispiel:
<Frame Src = "xxx.html" id = "FrameID" name = "Framenname" />
1. Zugriff auf das Frame -Objekt:
[Das zurückgegebene Objekt im IE ist Objekt, und der spezifische Typ wird in FF angezeigt, wie z. B.: Objektfenster]
IE: Verwenden Sie Window.frameid oder window.framename, um auf dieses Frame -Objekt zuzugreifen. FrameID und FrameNAMEN können denselben Namen haben.
Firefox: Nur Window.Framename kann verwendet werden, um auf dieses Frame -Objekt zuzugreifen.
Sowohl in IE als auch in Firefox können Sie Window.Document.GetElementById ("FrameID") verwenden, um auf dieses Frame -Objekt zuzugreifen.
2. Switch Frame Inhalt:
Sowohl in IE als auch in Firefox können Sie window.document.getElementById ("testFrame").
Wenn Sie die Parameter im Rahmen zurück an das übergeordnete Fenster übergeben müssen (beachten Sie, dass es sich nicht um einen Opener, sondern einen übergeordneten Frame handelt), können Sie übergeordnete übergeordnete im Rahmen auf das übergeordnete Fenster zugreifen. Zum Beispiel: parent.document.form1.filename.value = "a";
Körper
IE: Der Körper muss existieren, nachdem der Body -Tag vollständig vom Browser gelesen wurde.
Firefox: Der Körper existiert, bevor das Körpermarke vom Browser vollständig gelesen wird.
Ereignisdelegationsmethode
IE: Die Codekopie lautet wie folgt: document.body.onload = Inject; // Funktion Inject () wurde zuvor implementiert
Firefox: Die Codekopie lautet wie folgt: document.body.onload = inject ();
Übergeordnetes Element
Der Unterschied zwischen Firefox und IE übergeordnetem Element (Abstammung)
Dh: obj.parentelement
Firefox: Obj.Parentnode
Lösung: Da sowohl Firefox als auch IE DOM unterstützen, ist es eine gute Wahl.
Mauszeiger Cursor
Cursor: Hand vs Cursor: Zeiger
Firefox: Hand nicht unterstützt
IE: Support Zeiger
Lösung: Verwenden Sie den Zeiger gleichmäßig
Inhaltstext
InnerText funktioniert normalerweise in IE. InnerText funktioniert jedoch nicht in Firefox, TextContent ist erforderlich.
Lösung:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('Element'). InnerText = "Mein Text"; } else {document.getElementById ('Element'). textC; }Betrieb auf Tisch
IE, Firefox und andere Browser haben unterschiedliche Operationen auf Tabellen -Tags. In IE darf es den Tischwerten nicht zuweisen, innerhtml -Werte zuzuweisen. Bei Verwendung von JS zum Hinzufügen eines TR ist die Blinddarmmethode nicht nützlich.
Lösung:
// Fügen Sie der Tabelle eine leere Zeile hinzu: var row = otable.insertrow (-1); var cell = document.createelement ("td"); cell.innerhtml = ""; cell.className = "a"; Row.AppendChild (Zelle);Optionssammlung
Betrieb der Optionssammlung auf Select Select
Zusätzlich zu [] ist auch selectName.options.item () möglich. Zusätzlich selectName.options.Length, selectName.options.add/entfernen kann in beiden Browsern verwendet werden.
*Beachten Sie, dass das Element nach Add zugewiesen wird, andernfalls fällt es fehl.
Xmlhttp
if (window.xmlhttprequest) {xmlhttp = new XmlHttpRequest (); } else if (window.activeXObject) {// Code für IE xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } if (xmlhttp) {xmlhttp.onReadyStatechange = xmlhttpChange; xmlhttp.open ("get", url, true); xmlhttp.send (); }For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Mathematical Operation Usage", "Summary of JSON Operation Skills in JavaScript", "Summary of JavaScript Switching Special Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Fähigkeiten "," Zusammenfassung von JavaScript -Datenstrukturen und Algorithmusfähigkeiten "und" Zusammenfassung des JavaScript -Traversalalgorithmus und der Fähigkeiten "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.