Die Kompatibilität von JavaScript ist seit langem ein wichtiges Problem für Webentwickler. Die Unterschiede zwischen formalen Spezifikationen, sachlichen Standards und verschiedenen Implementierungen haben viele Entwickler Tag und Nacht leiden. Zu diesem Zweck wird die JavaScript -Kompatibilität von IE und Firefox hauptsächlich aus den folgenden Unterschieden zusammengefasst:
Die Codekopie lautet wie folgt:
1. Unterschiede zwischen Funktionen und Methoden;
2. Style -Zugriff und Einstellungen;
3. DOM -Methode und Objektreferenz;
4. Event -Handling;
5. Kompatibilitätsbehandlung für andere Unterschiede.
1. Unterschiede zwischen Funktionen und Methoden
1. Getyear () Methode
[Analyseanweisungen] Schauen wir uns den folgenden Code an:
Die Codekopie lautet wie folgt:
var Jahr = neuer Datum (). getyear ();
document.write (Jahr);
Das Datum, an dem Sie in IE erhalten, ist "2010" und das Datum, das Sie in Firefox sehen, ist "110", vor allem, weil in Firefox Getyear den Wert von "aktuellem Jahr 1900" zurückgibt.
【Kompatibilitätsverarbeitung】 Hinzufügen zum beurteilen Sie das Jahr, wie z. B.:
Die Codekopie lautet wie folgt:
var Jahr = neuer Datum (). getyear ();
Jahr = (Jahr <1900? (1900+Jahr): Jahr);
document.write (Jahr);
Sie können es auch über Getingrear Getutculyar anrufen:
Die Codekopie lautet wie folgt:
var Jahr = neuer Datum (). GetFriyear ();
document.write (Jahr);
2. Funktion (eval ()
[Analyse Hinweis] In IE können Sie Eval ("IDName") oder getElementById ("idName") verwenden, um HTML -Objekte mit IDNAME zu erhalten. In Firefox können Sie nur GetElementById ("IdName") verwenden, um HTML -Objekte mit IDNAME zu erhalten.
[Kompatibilitätsverarbeitung] Verwenden Sie GetElementById ("IDName"), um ein HTML -Objekt mit IDNAME mit IDNAME zu erhalten.
A. Const Erklärung
[Analyse Hinweis] Das CONT -Schlüsselwort kann in IE nicht verwendet werden. wie:
Die Codekopie lautet wie folgt:
const constvar = 32;
In IE ist dies ein Syntaxfehler.
【Kompatible Verarbeitung】 Verwenden Sie keine const, verwenden Sie stattdessen VAR.
4. Var
[Analyseanweisungen] Weitere Informationen finden Sie im folgenden Code:
Die Codekopie lautet wie folgt:
echo = function (str) {
document.write (str);
}
Diese Funktion läuft normalerweise auf IE, aber ein Fehler wurde unter Firefox gemeldet.
[Kompatible Verarbeitung] Es ist normal, VAR vor dem Echo hinzuzufügen, und dies ist der Zweck unserer Erwähnung von VAR.
5. Const Problem
[Analyse Hinweis] Das CONT -Schlüsselwort kann in IE nicht verwendet werden. Zum Beispiel Constvar = 32; In IE ist dies ein Syntaxfehler.
【Lösung】 Verwenden Sie keine const, verwenden Sie stattdessen VAR.
2. Style -Zugriff und Einstellungen
1. Das "Float" -attribut von CSS
[Analyse Hinweis] Die grundlegendste Syntax für JavaScript zum Zugriff auf einen bestimmten CSS -Wert ist: Objekt.Style.Property, aber einige CSS -Eigenschaften sind die gleichen wie die reservierten Wortnamen in JavaScript, wie z.
In IE schreiben Sie Folgendes:
Die Codekopie lautet wie folgt:
document.getElementById ("Header"). Style.StyleFloat = "links";
Schreiben Sie in Firefox Folgendes:
Die Codekopie lautet wie folgt:
document.getElementById ("Header"). style.cssfloat = "links";
[Kompatibilitätsverarbeitung] Fügen Sie vor dem Schreiben ein Urteil hinzu, um festzustellen, ob der Browser IE ist:
Die Codekopie lautet wie folgt:
if (document.all) {//
document.getElementById ("Header"). Style.StyleFloat = "links";
}
sonst {// undefiniert, wenn nicht dh dh
document.getElementById ("Header"). style.cssfloat = "links";
}
2. Zugriff "für" im <Label> -Tag
[Analyse Hinweis] Wie das Attribut "Float" erfordert es auch die Verwendung einer unsichtbaren Syntax -Unterscheidung, um auf "für" im <label> -Tag zuzugreifen.
In IE schreiben Sie Folgendes:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("mylabel");
var myattribute = myObject.getAttribute ("htmlfor");
Schreiben Sie in Firefox Folgendes:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("mylabel");
var myattribute = myObject.getAttribute ("for");
[Kompatibilitätsverarbeitung] Die Lösung besteht darin, zuerst den Browsertyp zu bestimmen.
3.. Zugriff und Klasseneigenschaften festlegen und festlegen
[Analyse Hinweis] Auch weil die Klasse JavaScript reservierte Wörter ist, verwenden diese beiden Browser unterschiedliche JavaScript -Methoden, um diese Eigenschaft zu erhalten.
Wie schreibe ich alle IE -Versionen vor IE8.0:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("Header");
var myattribute = myObject.getAttribute ("className");
Anwendbar auf IE8.0 und Firefox -Schreiben:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("Header");
var myattribute = myObject.getAttribute ("Klasse");
Bei der Einstellung des Klassenattributs mit SetAtTribute () haben die beiden Browser außerdem den gleichen Unterschied.
Die Codekopie lautet wie folgt:
setAttribute ("className", value);
Diese Schreibmethode gilt für alle IE -Versionen vor IE8.0. Hinweis: IE8.0 unterstützt das Attribut "KlasseName" nicht.
setAttribute ("Klasse", Wert); ist für IE8.0 und Firefox geeignet.
【Kompatible Verarbeitung】】
Methode 1, schreiben Sie beide:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("Header");
myObject.SetatTribute ("Klasse", "classValue");
myObject.setattribute ("className", "classValue");
// Stellen Sie die Header -Klasse auf Klassenwert ein
Methode 2: IE und FF Support Object.ClassName, damit Sie es so schreiben können:
Die Codekopie lautet wie folgt:
var myObject = document.getElementById ("Header");
myObject.classname = "classValue"; // Setzen Sie die Header -Klasse auf classValue
Methode 3: Beurteilen Sie zuerst den Browsertyp und verwenden Sie dann die entsprechende Schreibmethode gemäß dem Browser -Typ.
4. Problem mit Objektbreite und Höhenzuweisungsproblemen
[Analyse Hinweis] Die Anweisung ähnlich wie obj.style.height = imgobj.height in Firefox ist ungültig.
【Kompatible Verarbeitung】 Verwenden Sie Obj.Style.Height = imgobj.Height + 'PX';
5. Styles hinzufügen
[Analyse Hinweis] In IE verwenden Sie die addrule () -Methode, um Stile hinzuzufügen, wie z. B. styleSheet.addrule ("P", "Farbe: #CCC", Stylesheet.length). Diese Methode ist jedoch nicht mit FF kompatibel und verwenden die Insetrule () -Methode, um sie in FF zu ersetzen. Wie stylesheet.insertrule ("p {color: #ccc}", stylesheet.length).
【Kompatible Verarbeitung】】
Die Codekopie lautet wie folgt:
if (stylesheet.insertrule) {
// Insertrule () Methode
}anders{
// Addrule () Methode
}
6. Endstil
[Analyse Hinweis] Manchmal scheitern unsere benutzerdefinierten Stile, da eine Stilüberlappung auftritt, wie z. Dann muss der endgültige Stil verwendet werden. Der letzte Stil im IE ist als Ele.CurrentStyle geschrieben. Attributname. Die Standard -Schreibmethode in DOM besteht darin, das Objekt des Dokuments zu verwenden.
[Kompatibilitätsverarbeitung] Beurteilen Sie zuerst den Browser (document.all) und führen Sie dann die obige Methode aus.
3. DOM -Methode und Objektreferenz
1. GetelementById
[Analyseanweisungen] Schauen wir uns eine Reihe von Codes an:
<!-Eingabeobjektzugriff 1->
Die Codekopie lautet wie folgt:
<input id = "id" type = "button" "
value = "klicken Sie mich" ōnclick = "alert (id.value)"/>
In Firefox antwortet der Knopf nicht in IE, das ist in Ordnung, denn für IE kann die ID eines HTML -Elements direkt als variabler Name im Skript verwendet werden, aber nicht in Firefox.
[Kompatibilitätsverarbeitung] Versuchen Sie, das W3C -DOM -Schreiben zu verwenden. Verwenden Sie beim Zugriff auf Objekte document.getElementById ("ID"), um mit ID auf das Objekt zuzugreifen, und eine ID muss auf der Seite eindeutig sein. Verwenden Sie beim Zugriff auf Objekte mit einem Tag -Namen document.getElementsByTagName ("div") [0]. Diese Methode wird von mehr Browsern unterstützt.
<!-Eingabeobjektzugriff 2->
Die Codekopie lautet wie folgt:
<input id = "id" type = "button" value = "klicken Sie mich klicken".
onclick = "alert (document.getElementById ('id'). value)" />
2. Zugriff auf das Objekt des Sammlungsklassens
[Analyse Hinweis] Unter IE können Sie () oder [] das Sammlungsklassenobjekt verwenden; Unter Firefox können Sie nur [] [] verwenden, um das Sammlungsklassenobjekt zu erhalten. wie:
document.write (document.forms ("Formname"). src);
// Diese Schreibmethode kann auf das SCRC -Attribut des Formularobjekts unter IE zugreifen
【Kompatibilitätsverarbeitung】 Dokument ändern Verwenden Sie [], um Einheitliche Klassenobjekte auf einheitliche Weise zu erhalten.
3. Referenz des Rahmens
[Analyse Hinweis] IE kann auf das Fensterobjekt zugreifen, das diesem Bild über ID oder Name entspricht, während Firefox nur auf das Fensterobjekt zugreifen kann, das diesem Rahmen über den Namen entspricht.
Wenn beispielsweise das obige Frame -Tag im HTM im obersten Fenster geschrieben ist, können Sie wie folgt darauf zugreifen:
IE: window.top.frameid oder window.top.frameName, um auf dieses Fensterobjekt zuzugreifen;
Firefox: Nur Window.Top.FramEname kann verwendet werden, um auf dieses Fensterobjekt zuzugreifen.
【Kompatible Verarbeitung】 Verwenden Sie den Rahmennamen, um auf Frame -Objekte zuzugreifen. Darüber hinaus können sowohl IE als auch Firefox verwendet werden, um zu machen
window.document.getElementById ("FrameID"), um auf dieses Frame -Objekt zuzugreifen.
4. Abstammung
[Analyse Beschreibung] IE unterstützt die Verwendung von Parentelement und ParentNode, um übergeordnete Knoten zu erhalten. Firefox kann nur ParentNode verwenden.
[Kompatibilitätsverarbeitung] Da sowohl Firefox als auch IE DOM unterstützen, wird ParentNode verwendet, um auf den übergeordneten Knoten zuzugreifen.
5. Tischbetrieb
[Analyse Hinweis] In der Tabelle unter IE, unabhängig davon, ob sie mit Innerhtml oder AppendChild eingefügt wird, hat es keinen Einfluss, andere Browser zeigen es jedoch normalerweise an.
[Kompatible Verarbeitung] Die Lösung besteht darin, dem <Tbody> -Element der Tabelle <tr> hinzuzufügen, wie unten gezeigt:
Die Codekopie lautet wie folgt:
var row = document.createelement ("tr");
var cell = document.createelement ("td");
var cell_text = document.createTextNode ("Inhalt in eingefügter Inhalte");
cell.AppendChild (cell_text);
Row.AppendChild (Zelle);
document.getElementsByTagName ("tbody") [0] .AppendChild (row);
6. Knoten entfernen removenode () und removechild ()
[Analyse Hinweis] AppendNode kann normalerweise in IE und Firefox verwendet werden, aber Removenode kann nur in IE verwendet werden.
Die Funktion der Removenode -Methode besteht darin, einen Knoten zu löschen, wobei die Syntax knoten.Removede (False) oder Knoten.Removenode (TRUE) und der Rückgabewert der gelöschte Knoten ist.
Removenode (False) bedeutet, dass nur der angegebene Knoten gelöscht wird und der ursprüngliche untergeordnete Knoten dieses Knotens zum untergeordneten Knoten des ursprünglichen übergeordneten Knotens gefördert wird.
Removenode (True) bedeutet, den angegebenen Knoten und alle seine untergeordneten Knoten zu löschen. Der gelöschte Knoten wird zum Orphan -Knoten und hat keinen untergeordneten Knoten und einen übergeordneten Knoten mehr.
[Kompatibilitätsverarbeitung] Knoten in Firefox haben keine Removenode -Methode, sodass sie nur durch die RemoveChild -Methode ersetzt werden können. Kehren Sie zunächst zum übergeordneten Knoten zurück und entfernen Sie den Knoten, der aus dem übergeordneten Knoten entfernt werden soll.
node.parentnode.removechild (Knoten);
// Um sowohl IE als auch Firefox normalerweise zu verwenden, nehmen Sie den übergeordneten Knoten der vorherigen Schicht und entfernen Sie sie dann.
7. Knoten von Childnodes erhalten
[Analyse Hinweis] Die Bedeutung von Childnodes -Index ist in IE und Firefox unterschiedlich. Schauen wir uns den folgenden Code an:
Die Codekopie lautet wie folgt:
<ul id = "main">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
<Eingabe type = button value = "Klicken Sie auf mich!" Onclick =
"alert (document.getElementById ('main'). Childnodes.length)">
Wenn Sie mit IE bzw. Firefox laufen, ist das Ergebnis von IE 3, während Firefox 7 ist. Firefox verwendet die DOM -Spezifikation, und "#Text" bedeutet Text (tatsächlich bedeutungslose Räume und Linienbrüche usw.). In IE wird nur Text mit praktischer Bedeutung in "#Text" analysiert.
【Kompatible Verarbeitung】】
Methode 1: Wenn Sie untergeordnete Knoten erhalten, können Sie dieses Problem durch Knoten vermeiden. GetElementsByTagName ist jedoch offensichtlich nicht so gut wie die Verwendung von Childnodes zum Durchlaufen komplexer DOM -Strukturen, da Childnodes die DOM -Hierarchie besser umgehen können.
Methode 2. In der tatsächlichen Verwendung können Sie es auch zur für die für die für die Loop hinzufügen Sie bei Firefox -Knoten hinzufügen:
if (childnode.nodename == "#text") Fortsetzung; // oder verwenden Sie Nodetype == 1.
Auf diese Weise können Sie einige Textknoten überspringen.
Weitere Lesen
"Unterschied zwischen Childnodes in IE und Firefox"
8. Firefox kann Innertext nicht unterstützen
[Analyse Hinweis] Firefox unterstützt InnerText nicht, es unterstützt TextContent bei der Implementierung von InnerText, aber TextContent berücksichtigt keine Elemente wie InnerText, sodass es nicht vollständig mit IE kompatibel ist. Wenn Sie nicht textContent verwenden, enthält die Zeichenfolge keinen HTML -Code, der auch durch InnerHTML ersetzt werden kann. Sie können auch eine Methode zum Implementieren schreiben. Weitere Informationen finden Sie in dem Artikel "Implementierung von InnerText -Attribut für Firefox".
【Vergleiche Verarbeitung】 Vergleiche durch Beurteilung des Browsertyps:
Die Codekopie lautet wie folgt:
if (document.all) {
document.GetElementById ('Element'). InnerText = "Mein Text";
} anders{
document.getElementById ('Element'). textContent = "Mein Text";
}
4. Ereignishandling
Wenn bei der Verwendung von JavaScript eine Ereignisverarbeitung beteiligt ist, müssen Sie die Unterschiede zwischen Ereignissen in verschiedenen Browsern kennen. Es gibt drei Haupt -JavaScript -Ereignismodelle (siehe "Unterstützung von drei Ereignismodellen gleichzeitig", die NN4, IE4+ und W3C/Safar sind.
1. Window.Event
【Analyse Anweisungen】 Sehen Sie sich zuerst ein Stück Code an
Die Codekopie lautet wie folgt:
Funktion ET ()
{
Alert (Ereignis); // dh: [Objekt]
}
Das Ergebnis des obigen Code, der in IE ausgeführt wird, ist [Objekt], aber er kann nicht in Firefox ausgeführt werden.
Da das Ereignis direkt als Eigenschaft eines Fensterobjekts im IE verwendet werden kann, aber in Firefox wird das W3C -Modell verwendet, das Ereignisse durch die Methode zum Übergeben von Parametern verbreitet, dh Sie müssen eine Ereignisantwort -Schnittstelle für Ihre Funktion bereitstellen.
[Kompatibilitätsverarbeitung] Fügen Sie das Ereignisurteil hinzu und erhalten Sie das richtige Ereignis gemäß dem Browser:
Die Codekopie lautet wie folgt:
Funktion ET ()
{
evt = evt? evt: (window.event? window.event: null);
// kompatibel mit IE und Firefox
Alarm (EVT);
}
2. Akquisition des Tastaturwerts
[Analyse Hinweis] Die Methoden zum Erhalten von Tastaturwerten aus IE und Firefox sind unterschiedlich. Es kann verstanden werden, dass das Ereignis unter Firefox dem Ereignis entspricht. Für die Unterschiede des anderen finden Sie unter "Kompatibilitätstest für KeyCode, die und in Tastaturereignissen CharCode Charcode".
【Kompatible Verarbeitung】】
Die Codekopie lautet wie folgt:
Funktion myKeypress (evt) {
// kompatibel mit IE und Firefox, um ein Keyboarde -Objekt zu erhalten
evt = (evt)? EVT: ((window.event)? window.event: "")
// kompatibel mit IE und Firefox, um den Schlüsselwert des TastatureVent -Objekts zu erhalten
var key = evt.keycode? evt.keycode: evt.which;
if (evt.ctrlkey && (key == 13 || key == 10)) {
// Strg und Eintritt wurden gleichzeitig gedrückt
// etwas tun;
}
}
3.. Ereignisquelle erhalten
[Analyse Hinweis] Bei der Verwendung von Ereignisdelegierten können wir bestimmen, aus welchem Element das Ereignis durch die Ereignisquellenerfassung stammt. In IE verfügt das Ereignisobjekt jedoch über eine Srcelement -Eigenschaft, aber keine Zieleigenschaft. In Firefox verfügt das gleichmäßige Objekt über eine Zieleigenschaft, aber keine Srcelement -Eigenschaft.
【Kompatible Verarbeitung】】
Die Codekopie lautet wie folgt:
ele = function (evt) {// Erfassen Sie das Objekt, dass das aktuelle Ereignis wirkt
evt = evt || window.event;
Zurückkehren
(obj = event.srcelement? event.srcelement: event.target;);
}
4. Ereignisüberwachung
[Analyse Hinweis] In Bezug auf das Hören und Verarbeitung von Ereignissen bietet der IE zwei Schnittstellen: Anhang und Ablösung, während Firefox AddEventListener und REMEGEVENTLITELERSerer bereitstellt.
[Kompatibilitätsverarbeitung] Die einfachste Kompatibilitätsverarbeitung besteht darin, diese beiden Schnittstellensätze zu verkapulieren:
Die Codekopie lautet wie folgt:
Funktion AddEvent (Elem, Eventname, Handler) {
if (Elem.attachevent) {
Elem.attachEvent ("on" + Ereignisname, function () {
Handler.Call (Elem)});
// Verwenden Sie den Callback -Funktion call (). Lassen Sie diesen Punkt auf Elem dienen
} else if (elem.addeventListener) {
Elem.AdDeVentListener (Eventname, Handler, Falsch);
}
}
Funktion removentEvent (Elem, Ereignisname, Handler) {
if (Elem.detachevent) {
Elem.DetACHEvent ("on" + Ereignisname, function () {
Handler.Call (Elem)});
// Verwenden Sie den Callback -Funktion call (). Lassen Sie diesen Punkt auf Elem dienen
} else if (Elem.removeEventListener) {
Elem.RemoveEventListener (Eventname, Handler, Falsch);
}
}
Es ist zu beachten, dass dies unter Firefox in der Ereignisbehandlungsfunktion auf das angehaltene Element selbst zeigt, aber im IE können Sie den Callback -Funktionsaufruf verwenden, um den aktuellen Kontext auf das angehörte Element hinweisen zu lassen.
5. Maus Position
[Analyse Hinweis] 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, aber keine X- und 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. Die absolute Position muss in komplexen Punkten berücksichtigt werden
Die Codekopie lautet wie folgt:
Funktion getabspoint (e) {
var x = e.offsetleft, y = e.offsettop;
while (e = e.offsetParent) {
x += e.offsetleft;
y += e.offsettop;
}
alert ("x:" + x + "," + "y:" + y);
}
5. Kompatibilitätsbehandlung anderer Unterschiede
1. xmlhttprequest
[Analyse Hinweis] New ActiveXObject ("microsoft.xmlhttp"); funktioniert nur in IE. Firefox unterstützt es nicht, unterstützt aber XMLHTTPrequest.
【Kompatible Verarbeitung】】
Die Codekopie lautet wie folgt:
Funktion createxhr () {
var xhr = null;
if (window.xmlhttprequest) {
xhr = new ActiveXObject ("msxml2.xmlhttp");
}anders{
versuchen {
xhr = new ActiveXObject ("microsoft.xmlhttp");
}
fangen() {
xhr = null;
}
}
if (! xhr) return;
Rückgabe xhr;
}
2. Modale und nicht modale Fenster
[Analyse Hinweis] In IE können modale und nicht modale Fenster durch Showmodaldialog und ShowmodelessDialog geöffnet werden, aber Firefox unterstützt sie nicht.
[Lösung] Verwenden Sie Window.open (Pageurl, Name, Parameter), um ein neues Fenster zu öffnen. Wenn Sie Parameter übergeben müssen, können Sie Frame oder Iframe verwenden.
A. Input.Type Attributproblem
Die Eingabe-Eigenschaft unter IE ist schreibgeschützt, kann jedoch unter Firefox geändert werden.
V.
Setzen Sie Optionen, dh und Firefox sind unterschiedlich geschrieben:
Firefox: Kann direkt eingestellt werden
Die Codekopie lautet wie folgt:
option.text = 'foooooooooo';
Dh: nur gesetzt
Die Codekopie lautet wie folgt:
option.innerhtml = 'foooooooo';
Methode zum Löschen einer Auswahloption:
Firefox: Ja
Die Codekopie lautet wie folgt:
select.options.remove (selectedIndex);
IE7: Kann verwendet werden
Die Codekopie lautet wie folgt:
select.options [i] = null;
IE6: muss schreiben
Die Codekopie lautet wie folgt:
select.options [i] .outerhtml = null;
5. Analyse von IMG -Objekten Alt und Titel
[Analyse Hinweis] Das IMG -Objekt hat zwei Attribute: Alt und Titel. Der Unterschied besteht darin, dass ALT: Eine Eingabeaufforderung, wenn das Foto nicht vorhanden ist oder die Last falsch ist.
Titel: Die Tippbeschreibung des Fotos. Wenn der Titel in IE nicht definiert ist, kann ALT auch als IMG -Spitze verwendet werden, sondern in Firefox, beide genau gemäß der Definition im Standard.
Beim Definieren eines IMG -Objekts.
[Kompatible Verarbeitung] Es ist am besten, alle ALT- und Titelobjekte zu schreiben, um sicherzustellen, dass sie normalerweise in verschiedenen Browsern verwendet werden können.
6. IMGs SRC -Aktualisierungsproblem
[Analyseanweisungen] Schauen wir uns zuerst den Code an:
Die Codekopie lautet wie folgt:
<img id = "pic" onclick = "this.src = 'A.jpg'" src = "aa.jpg" style = "cursor: pointer"/>
Unter IE kann dieser Code verwendet werden, um Bilder zu aktualisieren, jedoch nicht unter Firefox. Es ist hauptsächlich ein Caching -Problem.
[Kompatibilitätsverarbeitung] Hinzufügen einer zufälligen Nummer nach der Adresse wird sie gelöst:
Die Codekopie lautet wie folgt:
<img id = "pic" onclick = "javaScript: this.src = this.src+'?'+math.random ()" src = "a.jpg" style = "cursor: pointer"/>
Zusammenfassen
Es gibt viele Unterschiede im JavaScript zwischen IE und Firefox. Um kompatibel zu sein, denke ich, dass es notwendig ist, einige gemeinsame in einer JS -Bibliothek zu organisieren, z. B. DOM -Operationen, Ereignisverarbeitung, XMLHTTPREquest -Anforderungen usw., oder Sie können auch einige vorhandene Bibliotheken verwenden (z. B. JQuery, Yui, Extjs usw.). Ich denke jedoch, dass es immer noch notwendig ist, diese Unterschiede zu verstehen, was für uns sehr hilfreich ist, an Kompatibilität und Usability -Code teilzunehmen.
Es gibt immer mehr Lösungen als Probleme. Egal wie der Browser kompatibel ist, die Front-End-Entwicklung kann immer gelöst werden!