1. document.formName.Item ("itemName") Problem
Problembeschreibung: In IE können Sie document.formName.item ("itemName") oder document.formName.elements ["elementname"] verwenden; In Firefox können Sie nur document.formName.elements ["elementname"] verwenden.
Lösung: Verwenden Sie document.formName.elements ["elementname"] auf einheitliche Weise.
2. Problem des Sammelnobjekts
Problembeschreibung: In IE können Sie () oder [] das Sammlungsklassenobjekt verwenden; In Firefox können Sie nur [] verwenden, um das Sammlungsklassenobjekt zu erhalten.
Lösung: Verwenden Sie [], um Einheitliche Klassenobjekte auf einheitliche Weise zu erhalten.
3.. Benutzerdefinierte Attributprobleme
Problembeschreibung: In IE können Sie die Methode zum Erhalten regelmäßiger Attribute verwenden, um benutzerdefinierte Attribute zu erhalten, oder Sie können GetAttribute () verwenden, um benutzerdefinierte Attribute zu erhalten. In Firefox können Sie nur GetAttribute () verwenden, um benutzerdefinierte Attribute zu erhalten.
Problemumgehung: Erhalten Sie einheitlich benutzerdefinierte Attribute über getAtTribute ().
4. Eval ("IDNAME") Problem
Problembeschreibung: In IE können Sie Eval ("IDName") oder getElementById ("idName") verwenden, um ein HTML -Objekt mit IDNAME zu erhalten. In Firefox können Sie nur GetElementById ("IdName") verwenden, um ein HTML -Objekt mit IDNAME zu erhalten.
Lösung: Verwenden Sie GetElementById ("IDName"), um das HTML -Objekt mit ID als IDName zu erhalten.
5. Das Problem des Variablennamens und der ID eines bestimmten HTML -Objekts
Problembeschreibung: Unter IE kann die ID des HTML -Objekts direkt als variabler Name des untergeordneten Objekts des Dokuments verwendet werden, jedoch nicht in Firefox. Unter Firefox kann der variable Name, der mit der HTML -Objekt -ID übereinstimmt, verwendet werden, jedoch 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 das Schlüsselwort VAR hinzu, um Unklarheiten zu vermeiden.
6. Const Problem
Problembeschreibung: In Firefox können Sie das Schlüsselwort const oder das VAR -Schlüsselwort verwenden, um Konstanten zu definieren. In IE können Sie das VAR -Schlüsselwort nur verwenden, um Konstanten zu definieren.
Lösung: Verwenden Sie das VAR -Schlüsselwort, um Konstanten einheitlich zu definieren.
7. Das Attributproblem der Eingabe.Type
Problembeschreibung: Die Eigenschaft Eingabe.typ unter IE ist schreibgeschützt; Aber die Eigenschaft Eingabe.type unter Firefox ist Leseschreiber.
Lösung: Ändern Sie nicht die Eigenschaft Eingabe.typ. Wenn Sie es ändern müssen, können Sie zuerst die ursprüngliche Eingabe ausblenden und dann ein neues Eingangselement in derselben Position einfügen.
8. Window.Event Problem
Problembeschreibung: Window.event kann nur unter IE, nicht in Firefox, laufen, da das Firefox -Ereignis nur in der Szene verwendet werden kann, in der das Ereignis auftritt.
Lösung: Fügen Sie der Funktion, in der das Ereignis auftritt, Ereignisparameter hinzu und verwenden Sie var myevent = evt? Evt: (window.event? Window.event: null)
Beispiel:
<input type = "button" onclick = "dosomething (Ereignis)"/> <script Language = "javaScript"> Funktion dosomething (evt) {var myevent = evt? evt: (window.event? event: null) ...}9. Event.x und Event.y Themen
Problembeschreibung: Unter IE hat das gleichmäßige Objekt X- und Y -Attribute, aber keine Seitex- und Seitenattribute; Unter Firefox verfügt das gleichmäßige Objekt über PageX- und Seitenattribute, aber keine X- und Y -Attribute.
Lösung: var myx = event.x? event.x: event.pagex; var myy = event.y? event.y: event.pagey;
Wenn Sie das 8. Problem berücksichtigen, verwenden Sie einfach MyEvent anstelle von Ereignis.
10. Event.srcelement Problem
Problembeschreibung: Unter IE hat das gleichmäßige Objekt eine Srcelement -Eigenschaft, aber keine Zieleigenschaft; Unter Firefox verfügt das gleichmäßige Objekt über eine Zieleigenschaft, aber keine Srcelement -Eigenschaft.
Lösung: Verwenden Sie srcobj = event.srcelement? event.srcelement: event.target;
Wenn Sie das 8. Problem berücksichtigen, verwenden Sie einfach MyEvent anstelle von Ereignis.
11. window.location.href Problem
Problembeschreibung: In IE oder Firefox2.0.x können Sie window.location oder window.location.href verwenden; In Firefox1.5.x können Sie nur Windows.location verwenden.
Problemumgehung: Verwenden Sie Window.location anstelle von window.location.href. Natürlich können Sie auch in Betracht ziehen, die Methode von Ort.Replace () zu verwenden.
12. Modale und nicht modale Fensterprobleme
Problembeschreibung: Unter IE können modale und nicht modale Fenster über Showmodaldialog und ShowmodelessDialog geöffnet werden; Unter Firefox kann es nicht.
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. Wenn das übergeordnete Fenster das untergeordnete Fenster steuern muss, verwenden Sie var subwindow = window.open (pageurl, Name, Parameter); um das neu geöffnete Fensterobjekt zu erhalten.
Dreizehn, Rahmen- und Iframe -Probleme
Der folgende Rahmen ist ein Beispiel:
(1) Zugriffs -Frame -Objekt
IE: Verwenden Sie Window.frameid oder window.framename, um auf dieses Frame -Objekt zuzugreifen.
Firefox: Verwenden Sie Window.framename, um auf dieses Frame -Objekt zuzugreifen.
Lösung: Verwenden Sie Window.Document.
(2) Switch -Rahmeninhalt
Sowohl in IE als auch in Firefox können Sie window.document.getElementById ("FrameID").
Wenn Sie die Parameter im Rahmen zurück an das übergeordnete Fenster übergeben müssen, können Sie das übergeordnete Schlüsselwort im Rahmen verwenden, um auf das übergeordnete Fenster zuzugreifen.
14. Problem der Körperbelastung
Problembeschreibung: Das Körperobjekt von Firefox existiert, bevor der Body -Tag vollständig vom Browser gelesen wird. Während IEs Körperobjekt existieren muss, nachdem der Body -Tag vollständig vom Browser gelesen wurde.
[Hinweis] Dieses Problem wurde noch nicht überprüft und wird nach der Überprüfung geändert.
[Hinweis] Es wurde bewiesen, dass die oben genannten Probleme in IE6, Opera9 und Firefox2 nicht vorhanden sind. Ein einfaches JS -Skript kann auf alle Objekte und Elemente zugreifen, die vor dem Skript geladen wurden, auch wenn dieses Element noch nicht geladen wurde.
15. Ereignisdelegationsmethode
Problembeschreibung: Verwenden Sie in IE document.body.onload = Inject; wo function inject () vor diesem implementiert wurde; Verwenden Sie in Firefox document.body.onload = Inject ();
Lösung: Verwenden Sie document.body.onload = new Function ('Inject ()'); oder document.body.onload = function () {/* Hier ist der Code*/}
[Hinweis] Der Unterschied zwischen Funktion und Funktion
16. Der Unterschied zwischen dem übergeordneten Element, auf das aufgerufen wurde
Problembeschreibung: Verwenden Sie unter IE Obj.Parentelement oder Obj.Parentnode, um auf OBJs übergeordnete Knoten zuzugreifen. Verwenden Sie unter Firefox Obj.Parentnode, um auf OBJs übergeordnete Knoten zuzugreifen.
Lösung: Da sowohl Firefox als auch IE DOM unterstützen, wird Obj.Parentnode verwendet, um auf den übergeordneten Knoten von Obj zuzugreifen.
17. Das Problem des InnerText.
Problembeschreibung: InnerText funktioniert im IE ordnungsgemäß, aber InnerText funktioniert nicht in Firefox.
Problemumgehung: Verwenden Sie TextContent anstelle von InnerText in Nicht-IE-Browsern.
Beispiel:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('Element'). InnerText = "Mein Text"; } else {document.getElementById ('Element'). textContent = "; mein Text"; }[Anmerkung] Innerhtml wird von Browsern wie IE und Firefox unterstützt. Andere, wie beispielsweise Outerhtml, werden nur von dem IE unterstützt, daher ist es am besten, es nicht zu verwenden.
18. Tischbetriebsprobleme
Problembeschreibung: IE, Firefox und andere Browser haben unterschiedliche Operationen auf Tabellen -Tags. In IE darf es den Tischwerten nicht zuweisen, innerhtml -Werte zuzuweisen. Bei der Verwendung von JS funktioniert die Verwendung der Apfel -Methode nicht. document.Appendchild unterstützt Firefox beim Einfügen von Zeilen in Tabellen, dh sie jedoch nicht unterstützt.
Lösung: Zeilen in tbody einfügen, setzen Sie sie nicht direkt in Tabellen ein
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 = "xxxx"; Row.AppendChild (Zelle);[Hinweis] Es wird empfohlen, JS -Framework -Sets zu verwenden, um Tabellen wie JQuery zu betreiben.
• Holen Sie sich die Anzahl der Zeilen und Spalten der Tabelle
In IE können Sie den folgenden Code verwenden, um die Anzahl der Zeilen und Spalten zu erhalten:
var detailt = grid.gettable ("11"); // Erhalten Sie die Länge der Zeile var r = detailt.rows.length; // Erhalten Sie die Länge der Spalte var l = detailt.cells.length;Und die Länge der Spalte in Firefox oder Google zu erhalten, ist ungültig.
Lösung:
var detailt = grid.gettable ("11"); // Erhalten Sie die Länge der Zeile var r = detailt.rows.length; // Erhalten Sie die Länge der Spalte var l = detailt.rows [0] .cells.length;19. Problem mit Objektbreite und Höhenzuweisung
Problembeschreibung: Die ähnliche Aussage wie obj.style.height = imgobj.height in Firefox ist ungültig.
Lösung: Verwenden Sie obj.style.height = imgobj.height + 'px' in Uniform;
20. SetAttribute ('Stil', 'Farbe: Rot;')
Firefox unterstützt (außer dh, alle Browser unterstützen es jetzt), dh es unterstützt es nicht
Lösung: Nicht setAttribute ('style', 'color: rot')
Verwenden Sie Object.Style.cSSTEXT = 'Farbe: Rot;' (Es gibt Ausnahmen von diesem Schreiben)
Der beste Weg ist, alle oben genannten Methoden zu verwenden, und es wird narrensicher.
21. Klassennameneinstellung
setAttribute ('Klasse', 'Styleclass')
Firefox unterstützt, aber der IE unterstützt nicht (Geben Sie den Attributnamen an, dh die Klassenattribut des Elements nicht festgelegt. Im Gegenteil erkennt der IE automatisch das ClassName -Attribut, wenn SetAttribute verwendet wird).
Lösung:
setAttribute ('class', 'styleclass') setAttribute ('className', 'styleclass') oder direkt Object.className = 'styleclass';Sowohl IE als auch FF Support Object.className.
22. Setzen Sie Ereignisse mit SetAttribute
var obj = document.getElementById ('objid');
obj.setattribute ('onclick', 'funcitonName ();');
Firefox unterstützt, aber der IE unterstützt nicht
Lösung:
In IE muss die Punktnotation verwendet werden, um auf den erforderlichen Ereignishandler zu verweisen, und anonyme Funktionen müssen ihm zugewiesen werden.
wie folgt:
var obj = document.getElementById ('objid'); obj.onclick = function () {fucntionName ();};Diese Methode wird von allen Browsern unterstützt
23. Erstellen Sie einen Optionsfeld
Andere Browser als IE
var rdo = document.createelement ('Eingabe'); rdo.setattribute ('type', 'radio'); rdo.setAttribute ('name', 'radiobtn'); rdo.setAttribute ('Wert', 'geprüft');Dh:
var rdo = document.createelement ("<Eingabe name =" radioBtn "type =" radio "value =" checked " />");Lösung:
Dieser Unterschied unterscheidet sich von der vorherigen. Diesmal ist es völlig anders
Glücklicherweise kann der IE das UniqueID -Attribut des Dokuments erkennen, das andere Browser nicht erkennen können. Problem gelöst.
Die schnelle Lösung für die 23 Probleme der Multi-Browser-Kompatibilität in JavaScript ist der vollständige Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.