Heim >Web-Frontend >js-Tutorial >Probleme mit der JavaScript-Kompatibilität unter IE und FF_Basic-Kenntnissen

Probleme mit der JavaScript-Kompatibilität unter IE und FF_Basic-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:47:441051Durchsuche

JavaScript-Kompatibilität ist seit langem ein großes Problem für Webentwickler. Viele Entwickler kämpfen mit den Unterschieden zwischen formalen Spezifikationen, De-facto-Standards und Implementierungen. Zu diesem Zweck fassen wir die Javascript-Kompatibilität von IE und Firefox hauptsächlich unter folgenden Aspekten zusammen:

Kopieren Sie den Code Der Code ist wie folgt folgt:
Unterschiede in Funktionen und Methoden
3 >5. Sonstige Unterschiede Kompatible Verarbeitung.




1. Unterschiede zwischen Funktionen und Methoden

1. getYear()-Methode [Analyseanweisungen] Schauen Sie sich zunächst den folgenden Code an:

Code kopieren

Der Code lautet wie folgt:var year= new Date().getYear (); document.write(year);


Das im IE erhaltene Datum ist „2010“ und das in Firefox angezeigte Datum ist „110“, hauptsächlich weil getYear in Firefox den Wert „aktuelles Jahr 1900“ zurückgibt.
[Kompatibilitätsverarbeitung] Fügen Sie das Urteil des Jahres hinzu, z. B.:

Code kopieren

Der Code lautet wie folgt:var year= new Date().getYear (); Jahr = (Jahr<1900?(1900 Jahr):Jahr


Es kann auch über getFullYear getUTCFullYear:
aufgerufen werden

Code kopieren

Der Code lautet wie folgt:var year = new Date().getFullYear (); document.write(year);

2. eval()-Funktion

【Analyseerklärung】Im IE können Sie eval("idName") oder getElementById("idName") verwenden, um das HTML-Objekt mit der ID von idName abzurufen. Unter Firefox können Sie nur getElementById("idName") verwenden. um die ID des HTML-Objekts von idName zu erhalten.

[Kompatibilitätsverarbeitung] Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt mit der ID von idName zu erhalten.

3. const-Anweisung

【Analysehinweis】Das Schlüsselwort const kann im IE nicht verwendet werden. Zum Beispiel:

Code kopieren

Der Code lautet wie folgt:const constVar = 32;
Dies ist ein Syntaxfehler im IE.

[Kompatibilitätsverarbeitung] Verwenden Sie nicht const und stattdessen var.

4. var

[Analyseanweisungen] Bitte beachten Sie den folgenden Code:

Code kopieren

Der Code lautet wie folgt:echo=function(str){ document.write(str); }


Diese Funktion läuft normal im IE, in Firefox wird jedoch ein Fehler gemeldet.

[Kompatibilitätsverarbeitung] Es ist normal, var vor echo hinzuzufügen. Dies ist der Zweck, warum wir var erwähnen.

5. Konstantenproblem

【Analysehinweis】Das Schlüsselwort const kann im IE nicht verwendet werden. Zum Beispiel const constVar = 32; Dies ist ein Syntaxfehler im IE.

【Lösung】Verwenden Sie nicht const, sondern stattdessen var.

2. Stilzugriff und -einstellungen

1. CSS-Attribut „float“

[Analyseerklärung] Die grundlegendste Syntax für Javascript für den Zugriff auf einen bestimmten CSS-Wert ist: object.style.property, aber einige CSS-Eigenschaften haben die gleichen Namen wie reservierte Wörter in Javascript, wie zum Beispiel „float“, „for“ , "class "Warten Sie, verschiedene Browser schreiben es unterschiedlich.

Schreiben Sie dies im IE:

Code kopieren

Schreiben Sie dies in Firefox:

Code kopieren

[Kompatibilitätsverarbeitung] Fügen Sie vor dem Schreiben eine Beurteilung hinzu, um festzustellen, ob der Browser IE ist:

Code kopieren

Der Code lautet wie folgt:

if(document.all){ //
 document.getElementById("header").style.styleFloat = "left"
}
else{ //Wenn nicht, also undefiniert
 document.getElementById("header").style.cssFloat = "left"
}

2. Greifen Sie auf „for“ im

Schreiben Sie dies im IE:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("myLabel ");
var myAttribute = myObject.getAttribute("htmlFor");

Schreiben Sie dies in Firefox:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("myLabel ");
var myAttribute = myObject.getAttribute("for");

[Kompatibilitätsverarbeitung] Die Lösung besteht darin, zunächst den Browsertyp zu bestimmen.

3. Auf Klassenattribute zugreifen und diese festlegen

[Erläuterung der Analyse] Da „Klasse“ ein reserviertes Wort in Javascript ist, verwenden diese beiden Browser unterschiedliche JavaScript-Methoden, um dieses Attribut abzurufen.

So schreiben Sie alle IE-Versionen vor IE8.0:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("header ");
var myAttribute = myObject.getAttribute("className");

Gilt für IE8.0 und Firefox-Schreibmethode:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("header ");
var myAttribute = myObject.getAttribute("class");

Darüber hinaus gibt es die gleichen Unterschiede zwischen den beiden Browsern, wenn setAttribute() zum Festlegen des Klassenattributs verwendet wird.

Code kopieren Der Code lautet wie folgt:
setAttribute("className",value);

Diese Schreibmethode gilt für alle IE-Versionen vor IE8.0. Hinweis: IE8.0 unterstützt auch nicht das Attribut „className“.

setAttribute("class",value); Anwendbar auf IE8.0 und Firefox.

【Kompatible Verarbeitung】

Methode eins, schreiben Sie beide:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("header ");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//Setze die Header-Klasse auf classValue

Methode 2: Sowohl IE als auch FF unterstützen object.className, sodass Sie es wie folgt schreiben können:

Code kopieren Der Code lautet wie folgt:
var myObject = document.getElementById("header ");
myObject.className="classValue";//Setzen Sie die Header-Klasse auf classValue

Methode drei: Bestimmen Sie zunächst den Browsertyp und verwenden Sie dann die entsprechende Schreibmethode entsprechend dem Browsertyp.

4. Problem bei der Zuweisung von Objektbreite und -höhe

[Analyseerklärung] Anweisungen ähnlich wie obj.style.height = imgObj.height sind in FireFox ungültig.

[Kompatibilitätsverarbeitung] Verwenden Sie obj.style.height = imgObj.height ‘px’;

5. Stil hinzufügen

[Erläuterung der Analyse] Verwenden Sie die Methode addRules(), um Stile im IE hinzuzufügen, z. B.: styleSheet.addRule("p","color:#ccc",styleSheet.length). Diese Methode ist nicht mit FF kompatibel. Verwenden Sie insetRule beim Ersetzen der FF()-Methode. Wie zum Beispiel styleSheet.insertRule("p{color:#ccc}",styleSheet.length).

【Kompatible Verarbeitung】

Code kopieren Der Code lautet wie folgt:
if(styleSheet.insertRule){
 // insertRule()-Methode
}else{
 //addRule()-Methode
}

6. Endgültiger Stil

【Analyseerklärung】Manchmal schlagen unsere benutzerdefinierten Stile fehl, weil sich Stile überschneiden, z. B. ein durch einen Klassenselektor definierter Stil und ein durch einen Tag-Selektor definierter Stil, und letzterer ist ungültig. Dann müssen Sie zu diesem Zeitpunkt den endgültigen Stil verwenden. Der endgültige Stil im IE wird als ele.currentStyle.property-Name geschrieben. Die Standardschreibmethode in DOM besteht darin, das document.defaultView-Objekt zu verwenden, z. B. document.defaultView.getComputedStyle(elel,null). Diese Methode ist mit FF kompatibel.

[Kompatibilitätsverarbeitung] Bestimmen Sie zuerst den Browser (document.all) und führen Sie dann die obige Methode aus.

3. DOM-Methoden und Objektreferenzen

1. getElementById

[Analyseanweisungen] Schauen wir uns zunächst eine Reihe von Codes an:

Code kopieren Der Code lautet wie folgt:

value="click me" ōnclick="alert(id.value)"/>
In Firefox reagiert die Schaltfläche nicht, aber im IE ist es in Ordnung, denn für IE kann die ID eines HTML-Elements direkt als Variablenname in einem Skript verwendet werden, in Firefox jedoch nicht.
【Kompatibilitätsverarbeitung】Versuchen Sie, beim Zugriff auf das Objekt document.getElementById("id") zu verwenden, um auf das Objekt über die ID zuzugreifen, und eine ID muss auf der Seite eindeutig sein Tag-Name Um auf das Objekt zuzugreifen, verwenden Sie document.getElementsByTagName("div")[0]. Diese Methode wird von vielen Browsern unterstützt.

Code kopieren Der Code lautet wie folgt: onclick="alert(document.getElementById('id').value)" />
2. Zugriff auf Sammlungsklassenobjekte

[Analyseerklärung] Unter IE können Sie () oder [] verwenden, um Sammlungsobjekte abzurufen. Unter Firefox können Sie nur [] verwenden, um Sammlungsobjekte abzurufen. Zum Beispiel:
document.write(document.forms("formName").src);

//Diese Schreibmethode kann auf das scrc-Attribut des Form-Objekts unter IE zugreifen

【Kompatibilitätsverarbeitung】Ändern Sie document.forms("formName") in document.forms["formName"]. Verwenden Sie [] einheitlich, um Sammlungsklassenobjekte zu erhalten.

3. Verweis auf Rahmen

[Analyseerklärung] IE kann über die ID oder den Namen auf das diesem Frame entsprechende Fensterobjekt zugreifen, während Firefox nur über den Namen auf das diesem Frame entsprechende Fensterobjekt zugreifen kann.

Wenn beispielsweise das obige Frame-Tag im HTM im Fenster der obersten Ebene geschrieben ist, kann wie folgt darauf zugegriffen werden:

IE: window.top.frameId oder window.top.frameName, um auf dieses Fensterobjekt zuzugreifen;

Firefox: Auf dieses Fensterobjekt kann nur über window.top.frameName zugegriffen werden.

[Kompatibilitätsverarbeitung] Verwenden Sie den Namen des Frames, um auf das Frame-Objekt zuzugreifen. Darüber hinaus kann es in IE und Firefox verwendet werden

window.document.getElementById("frameId"), um auf dieses Rahmenobjekt zuzugreifen.

4. parentElement

[Analyseerklärung] IE unterstützt die Verwendung von parentElement und parentNode zum Abrufen des übergeordneten Knotens. Firefox kann nur parentNode verwenden.

[Kompatibilität] Da sowohl Firefox als auch IE DOM unterstützen, wird parentNode verwendet, um auf den übergeordneten Knoten zuzugreifen.

5. Tischbedienung

[Analyseerklärung] In der Tabelle unter IE hat die Verwendung von innerHTML oder appendChild zum Einfügen von keine Auswirkung, andere Browser zeigen jedoch normal an.

[Kompatibilitätsverarbeitung] Die Lösung besteht darin, zum -Element hinzuzufügen:

Code kopieren

Der Code lautet wie folgt:

document.getElementsByTagName("tbody")[0].appendChild(row);

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:

Code kopieren Der Code lautet wie folgt:

  • 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:

Code kopieren Der Code lautet wie folgt:if(document.all){
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】

Code kopieren Der Code lautet wie folgt:

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】

Code kopieren Der Code lautet wie folgt:

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:

Code kopieren Der Code lautet wie folgt:

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

Der Code lautet wie folgt:Funktion getAbsPoint(e){ var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) {
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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn