Eine kurze Analyse der Browser -Kompatibilitätsprobleme in JavaScript

Probleme mit dem Browser -Kompatibilität sind leicht zu ignorierende, aber wichtigste Teile bei der tatsächlichen Entwicklung. Bevor wir über die Kompatibilitätsprobleme alter Versionen von Browsern sprechen, müssen wir zunächst verstehen, was die Fähigkeitserkennung ist. Es soll feststellen, ob der Browser über solche Funktionen verfügt, dh zu bestimmen, ob der aktuelle Browser die zugerufenen Attribute oder Methoden unterstützt. Hier sind einige kurze Einführungen.

1. InnerText und Innerential

1) Die Funktionen von InnerText und Innerential sind gleich

2) InnerText Browser -Unterstützung vor IE8

3) Innere alte Version der Firefox -Unterstützung

4) Die neue Version des Browsers unterstützt beide Methoden

 1 // alte Version der Browser sind mit InnerText und InnerContent2 if (element.textContent) {3 returnelement.textContent; 4} else {5 returnelement.inNeText; 6}

2. Erhalten Sie Kompatibilitätsprobleme von Bruderknoten/Elementen

1) Bruderknoten, alle Browser unterstützen

①Nextsibling der nächste Bruderknoten, der ein Nicht-Element-Knoten sein kann; Ein Textknoten wird erhalten

② Voreingenommener Sibling Der vorherige Geschwisterknoten kann ein Nicht-Element-Knoten sein; Der Textknoten wird erhalten

2) Bruderelemente, IE8 hat vorher nicht unterstützt

① Vorherige Auslösungen erhalten Sie das vorherige nächste Bruderelement und ignoriert die Lücken

②NextElementssibling bekommen das nächste benachbarte Geschwisterelement und ignoriert die Lücken

 // kompatibler Browser // Die nächste Geschwisterelementfunktion GetNextElement (Element) {// Fähigkeitserkennung if (Element.NextElementSibling) {returnelement.NextElementSSIBLING; } else {var node = Element.NextSsibling; while (node ​​&& node.nodetype! == 1) {node = node.nextibling; } Return Node; }}

 /*** return das vorherige Element*@Param Element*@returns {*}*/function getPreviousElement (Element) {if (element.PreviousElementSibling) {returnelement.PreviousElementSibling; } else {var el = element.Previoussibling; while (el && el.nodetype! } return el; }}

 /*** Browser kompatibel mit dem ersten Element FirstElementChild*@param parent*@returns {*}*/function getfirstelement (übergeordnet) {if (parent.firstelementChild) {return parent.firstelementchild; } else {var el = parent.Firstchild; while (el && el.nodetype! == 1) {el = el.Nextsibling; } return el; }}

 /*** RECHTE DAS LETZTE ELEMENT*@PARAM PORTER*@RETURNS {*}*/Funktion getLastElement (parent) {if (parent.lastElementChild) {return parent.lastElementChild; } else {var el = parent.lastchild; while (el && el.nodetype! } return el; }}

 /*** Holen Sie sich alle Geschwisterelemente des aktuellen Elements*@Param Element*@returns {Array}*/Funktion SIERBUL (Element) {if (! Element) return; var elements = []; var el = element.previoussibling; while (el) {if (el.nodetype === 1) {Elements.push (el); } el = El.Previoussibling; } el = element.previoussibling; while (el) {if (el.nodetype === 1) {Elements.push (el); } el = el.nextsibling; } el = element.previoussibling; } Rückgabeelemente;}

3.. Array.filter ();

// Testen Sie alle Elemente mit der angegebenen Funktion und erstellen Sie ein neues Array, das alle Elemente enthält, die den Test bestanden haben

 // kompatibel mit der alten Umgebung if (! Array.prototype.filter) {array.prototype.filter = function (fun/ *, thisArg */) {"Strict verwenden"; if (this === void 0 || this === null) werfen neue TypenError (); var t = Objekt (this); var len = t.length >>> 0; if (typeof fun! == "function") werfen neue typeerror (); var res = []; var thisarg = argumente.length> = 2? Argumente [1]: void 0; für (var i = 0; i <len; i ++) {if (i in t) {var val = t [i]; // Hinweis: Technisch gesehen sollte dies Object.defineProperty at // Der nächste Index, da Push von // Eigenschaften auf Object.Prototype und Array.Prototype beeinflusst werden kann. // Aber die neue und Kollisionen dieser Methode sollten // selten sein, verwenden Sie also die kompatiblere Alternative. if (fun.call (thisarg, val, i, t)) res.push (val); }} return res; };}

4. Array.foreach ();

// Traverse Array

 // kompatibel mit alten Umgebungen // Produktionsschritte von ECMA-262, Ausgabe 5, 15.4.4.18// Referenz: http://es5.github.io/#x15.4.4fif (! Array.Prototype.foreach) {Array.Prototype.foreach = Funktion (callback, thisarg) {var t, k; if (this == NULL) {neue TypenError werfen ('das ist null oder nicht definiert'); } // 1. Sei das Ergebnis des Aufrufens von toobject () das // | this | Wert als Argument. var o = Objekt (this); // 2. Sei lenvalue das Ergebnis des Aufrufens der Get () interne // Methode von O mit dem Argument "Länge". // 3. Sei len touint32 (lenvalue). var len = O.Length >>> 0; // 4. Wenn isCallable (Rückruf) falsch ist, werfen Sie eine TypeERROR -Ausnahme aus. // siehe: http://es5.github.com/#x9.11 if (typeof callback! } // 5. Wenn ThisArg geliefert wurde, sei es nicht ThisArg; sonst lass // t undefiniert sein. if (Argumente.length> 1) {t = thisArg; } // 6. Sei K 0 k = 0; // 7. Wiederholen Sie, während k <len während (k <len) {var kvalue; // A. Sei pk tostring (k). // Dies ist für LHS -Operatoren des In -Operators // b impliziert. Lassen Sie KPresent das Ergebnis des Aufrufens der internen Methode von HasProperty // mit Argument PK sein. // Dieser Schritt kann mit C // c kombiniert werden. Wenn kPresent wahr ist, dann wenn (k in o) {// i. KVALUE ist das Ergebnis des Aufrufens der GET INTERNEHMEN // Methode von O mit Argument PK. kValue = o [k]; // ii. Rufen Sie die aufrufe interne Methode von Callback mit T als // auf die Liste und Argumentliste für KVALUE, K und O. callback.call (t, kvalue, k, o) auf. } // D. Erhöhen Sie K um 1. K ++; } // 8. Return undefined};}

5. Registrierungsveranstaltung

.AddeventListener = Funktion (Typ, Hörer, usecapture) {};

// Der erste Parameterereignisname

// Die zweite Parameter -Ereignishandlerfunktion (Hörer)

// Der dritte Parameter True erfasst falsche Blasen

// Es wird erst nach IE9 unterstützt

// kompatibel mit alten Umgebungen

 var eventTools = {addEventListener: Funktion (Element, Ereignisname, Listener) {// Kapazitätserkennung if (element.adDeventListener) {element.adDeVentListener (EventName, Listener, False); } else if (element.attachEvent) {element.attachEvent ("on" + Ereignisname, Hörer); } else {element ["on" + Ereignisname] = Hörer; }}, // Wenn Sie Ereignisse entfernen möchten, können Sie die anonyme Funktion REMEDEVENTLITENER: Funktion (Element, Ereignisname, Listener) {if (element.removeEventListener) {element.removeEventListener (EventName, Listener, Listener, False) verwenden; } else if (element.detACHEvent) {// IE8 vor registrieren.attachEvent und entfernen Ereignisse } else {element ["on" + Ereignisname] = null; }}};

6. Ereignisobjekt

1) Ereignisparameter E ist das Ereignisobjekt, die Standard -Erfassungsmethode

btn.onclick = function (e) {}

2) E -Eventphase -Ereignisstufe, IE8 hat es vorher nicht unterstützt

3) E.Target ist immer das Objekt, das das Ereignis auslöst (Klick -Schaltfläche).

i) Vor IE8 srcelement

ii) Browser kompatibel

var target = e.target || window.event.srcelement;

 // Ereignisobjekt erhalten, das mit Browser getEvent: Funktion (e) {return e || kompatibel ist Fenster.Event; // Standardweise zum Erhalten von E -Ereignisobjekten; window.event Der Weg, um Ereignisobjekt vor IE8} // kompatibel mit Target GetTarget: Funktion (e) {return e.target || e.srcelement; }

7. Holen Sie sich die Mausposition auf der Seite

① Position im visuellen Bereich: e.clientx e.clienty

② Ort im Dokument:

i) E.Pagex E.Pagey

ii) Browser kompatibel

 var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var pagey = e.clienty + scrolltop;

8. Holen Sie sich die Entfernung zum Scrollen

 // kompatibler Browser var scrolltop = document.documentElement.scrolltop || document.body.scrolltop;

9. Die Textauswahl abbrechen

 // kompatibel mit Browserfenster.getSelection? window.getSelection (). removeallranges (): document.Selection.Empty ();

[Zusammenfassung] Dies ist nur eine teilweise Zusammenfassung, und Sie werden auch auf verschiedene Browser -Kompatibilitätsprobleme während der tatsächlichen Entwicklung stoßen. Unterschiedliche Browser stoßen auch auf unterschiedliche Anpassungsprobleme auf dem PC und auf dem Mobiltelefone. Diese warten darauf, dass die Kinderschuhe entdecken und zusammenfassen. Ich hoffe, es kann Ihnen helfen. Bitte geben Sie mir einige Ratschläge zu den Mängel ~~~

Die obige kurze Analyse der Kompatibilitätsprobleme von Browsern in JavaScript ist der gesamte 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.