suchen

Heim >Web-Frontend >js-Tutorial >Unterschiede zwischen js im IE und Firefox_Grundkenntnisse

Unterschiede zwischen js im IE und Firefox_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 16:31:331338Durchsuche

1.firefox kann innerText nicht unterstützen.
Firefox unterstützt innerHTML, aber nicht innerText. Es unterstützt textContent zur Implementierung von innerText, aber die zusätzlichen Leerzeichen werden standardmäßig ebenfalls beibehalten. Wenn textContent nicht verwendet wird, kann stattdessen innerHTML verwendet werden, wenn die Zeichenfolge keinen HTML-Code enthält.

2. Auswahl von Webinhalten verbieten:
Verwenden Sie im IE im Allgemeinen js: obj.onselectstart=function(){return false;}
Firefox verwendet CSS:-moz-user-select:none

3. Filterunterstützung (Beispiel: transparenter Filter):
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;

4. Ereignis erfassen:
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

5. Mausposition abrufen:
IE: event.clientX, event.clientY
Firefox: Die Ereignisfunktion ist erforderlich, um das Ereignisobjekt
zu übergeben obj.onmousemove=function(ev){
X=ev.pageX;Y=ev.pageY;
}

6. Grenzprobleme von DIV und anderen Elementen:
Beispiel: Legen Sie das CSS eines div::{width:100px;height:100px;border:#000000 1px solid;}
fest Im IE: Div-Breite (einschließlich Randbreite): 100 Pixel, Div-Höhe (einschließlich Randbreite): 100 Pixel; Und Firefox: die Breite des Div (einschließlich der Randbreite): 102 Pixel, die Höhe des Div (einschließlich der Randbreite): 102 Pixel;
Wenn Sie also dieses Ziehfenster erstellen, das mit IE und Firefox kompatibel ist, müssen Sie beim Schreiben von JS und CSS Ihr Gehirn einsetzen. Hier sind zwei Tipps für Sie

1. Bestimmen Sie den Browsertyp:

var isIE=document.all? true:false;

Ich habe eine Variable geschrieben. Wenn die document.all-Syntax unterstützt wird, ist IE=true, andernfalls isIE=false

2. CSS-Verarbeitung unter verschiedenen Browsern:

Im Allgemeinen können Sie !important verwenden, um die Verwendung von CSS-Anweisungen zu priorisieren (wird nur von Firefox unterstützt)

Zum Beispiel: {border-width:0px!important;border-width:1px;}
Unter Firefox hat dieses Element keinen Rahmen. Unter IE beträgt die Rahmenbreite 1px

1.document.formName.item("itemName") Problem

Beschreibung des Problems: Unter IE können Sie document.formName.item("itemName") oder document.formName.elements ["elementName"] verwenden, unter Firefox können Sie nur document.formName.elements["elementName"] verwenden; .

Lösung: document.formName.elements["elementName"] einheitlich verwenden.

2. Problem mit dem Sammelobjekt

Beschreibung des Problems: Unter IE können Sie () oder [] verwenden, um Sammlungsobjekte abzurufen; unter Firefox können Sie nur [ ] verwenden, um Sammlungsobjekte abzurufen.

Lösung: Verwenden Sie [] einheitlich, um Sammlungsklassenobjekte zu erhalten.

3. Probleme mit benutzerdefinierten Attributen

Beschreibung des Problems: Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen, oder Sie können getAttribute () verwenden, um benutzerdefinierte Attribute abzurufen. Unter Firefox können Sie nur getAttribute () verwenden, um benutzerdefinierte Attribute abzurufen.

Lösung: Erhalten Sie benutzerdefinierte Attribute einheitlich über getAttribute().

4.eval("idName") Problem

Beschreibung des Problems: Unter IE können Sie eval("idName") oder getElementById("idName") verwenden, um das HTML-Objekt mit der ID idName abzurufen; unter Firefox können Sie nur getElementById("idName") verwenden, um das zu erhalten HTML-Objekt mit der ID idName.

Lösung: Verwenden Sie getElementById("idName") einheitlich, um das HTML-Objekt zu erhalten, dessen ID idName ist.

5. Das Problem, dass der Variablenname mit einer HTML-Objekt-ID identisch ist

Beschreibung des Problems: Unter IE kann die ID des HTML-Objekts direkt als Variablenname des untergeordneten Objekts des Dokuments verwendet werden, nicht jedoch unter Firefox. Unter Firefox kann derselbe Variablenname wie die HTML-Objekt-ID verwendet werden. aber nicht unter IE.

Problemumgehung: Verwenden Sie document.getElementById("idName") anstelle von document.idName. Es ist am besten, Variablennamen nicht mit derselben HTML-Objekt-ID zu verwenden, um Fehler beim Deklarieren von Variablen zu vermeiden. Fügen Sie immer das Schlüsselwort var hinzu, um Mehrdeutigkeiten zu vermeiden.

6.const-Problem

Beschreibung des Problems: Unter Firefox können Sie das Schlüsselwort const oder das Schlüsselwort var zum Definieren von Konstanten verwenden. Unter IE können Sie zum Definieren von Konstanten nur das Schlüsselwort var verwenden.

Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren.

7.input.type-Attributproblem

Beschreibung des Problems: Das Attribut „input.type“ unter IE ist schreibgeschützt; das Attribut „input.type“ unter Firefox ist jedoch schreibgeschützt.

Lösung: Ändern Sie das Attribut input.type nicht. Wenn Sie es ändern müssen, können Sie zunächst die ursprüngliche Eingabe ausblenden und dann an derselben Position ein neues Eingabeelement einfügen.

8.window.event-Problem

Beschreibung des Problems: window.event kann nur unter IE ausgeführt werden, nicht jedoch unter Firefox. Dies liegt daran, dass das Ereignis von Firefox nur an der Stelle verwendet werden kann, an der das Ereignis auftritt.

Lösung: Fügen Sie den Ereignisparameter zu der Funktion hinzu, in der das Ereignis auftritt, und verwenden Sie var myEvent = evt?evt:(window.event?window.event:null)
im Funktionskörper (vorausgesetzt, der formale Parameter ist evt). Beispiel:

Code kopieren Der Code lautet wie folgt: