Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript

Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript

Die Browserkompatibilität ist der wichtigste Teil, der bei der eigentlichen Entwicklung leicht übersehen wird. Bevor wir über die Kompatibilitätsprobleme älterer Browserversionen sprechen, müssen wir zunächst verstehen, was Fähigkeitserkennung ist. Sie wird verwendet, um festzustellen, ob der Browser über diese Fähigkeit verfügt, d. h. um festzustellen, ob der aktuelle Browser die aufzurufenden Eigenschaften oder Methoden unterstützt. Nachfolgend finden Sie einige kurze Einführungen.

1. innerText und innerContent
1) innerText und innerContent haben die gleiche Funktion
2) innerText wird von Browsern vor IE8 unterstützt
3) innerContent Alte Version von Firefox unterstützt
4) Neue Browserversionen unterstützen beide Methoden

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. // Browser älterer Versionen sind mit innerText und innerContent kompatibel   
  2.    if (element.textinhalt) {
  3.          Element.Textinhalt zurückgeben ;
  4. } anders {
  5.         Element.innerText zurückgeben ;
  6. }

2. Kompatibilitätsprobleme beim Abrufen von Geschwisterknoten/-elementen

1) Brother-Knoten, von allen Browsern unterstützt

①nextSibling Der nächste Geschwisterknoten, der ein Nicht-Elementknoten sein kann; der Textknoten wird erhalten

② previousSibling Der vorherige Geschwisterknoten, der ein Nicht-Elementknoten sein kann; der Textknoten wird erhalten

2) Brother-Elemente, die vor IE8 nicht unterstützt wurden

① previousElementSibling holt das vorherige benachbarte Geschwisterelement und ignoriert Leerzeichen

②nextElementSibling holt das nächste benachbarte Geschwisterelement und ignoriert dabei Leerzeichen

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. //Kompatible Browser   
  2. // Das nächste benachbarte Geschwisterelement holen   
  3. Funktion getNextElement(element) {
  4.     // Fähigkeitstest   
  5.    wenn (element.nächstesElementGeschwister) {
  6.        Element zurückgeben.nächstesElementGeschwister ;
  7. } anders {
  8.           var node = element.nächstesGeschwister;
  9.           während (Knoten && Knoten.Knotentyp !== 1) {
  10. Knoten = Knoten.nextibling;
  11. }
  12.           Rücklaufknoten ;
  13. }
  14. }

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. /**
  2. * Gibt das vorherige Element zurück
  3. * @param-Element
  4. * @returns {*}
  5. */   
  6. Funktion getPreviousElement(element) {
  7.      if (element.vorherigesElementGeschwister) {
  8.          returniere Element.vorherigesElementGeschwister;
  9. } anders {
  10.          var el = element.vorherigesGeschwister;
  11.          während (el && el.nodeType !== 1) {
  12. el = el.vorherigesGeschwister;
  13. }
  14.          Rückgabe el;
  15. }
  16. }
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. /**
  2. * Gibt die Browserkompatibilität des ersten Elements firstElementChild zurück
  3. * @param übergeordnetes Element
  4. * @returns {*}
  5. */   
  6. Funktion getFirstElement(übergeordnet) {
  7.      wenn (Elternteil.erstesKindelement) {
  8.          returniere parent.firstElementChild;
  9. } anders {
  10.          var el = übergeordnetes Element.erstesKind;
  11.          während (el && el.nodeType !== 1) {
  12. el = el.nächstesGeschwister;
  13. }
  14.          Rückgabe el;
  15. }
  16. }
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. /**
  2. * Gibt das letzte Element zurück
  3. * @param übergeordnetes Element
  4. * @returns {*}
  5. */   
  6. Funktion getLastElement(übergeordnet) {
  7.      wenn (übergeordnetes.letztesElementKind) {
  8.          returniere übergeordnetes Element.letztesUnterelement;
  9. } anders {
  10.          var el = übergeordnetes Element.letztesKind;
  11.          während (el && el.nodeType !== 1) {
  12. el = el.vorherigesGeschwister;
  13. }
  14.          Rückgabe el;
  15. }
  16. }
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. /**
  2. * Alle Geschwisterelemente des aktuellen Elements abrufen
  3. * @param-Element
  4. * @returns {Array}
  5. */   
  6. Funktion Geschwister(Element) {
  7.      wenn (!element) return ;
  8.        
  9.      var Elemente = [ ];
  10.      var el = element.vorherigesGeschwister;
  11.      während (el) {
  12.          wenn (el.nodeType === 1) {
  13. Elemente.push(el);
  14. }
  15. el = el.vorherigesGeschwister;
  16. }
  17. el = element.vorherigesGeschwisterelement;
  18.       während (el) {
  19.          wenn (el.nodeType === 1) {
  20. Elemente.push(el);
  21. }
  22. el = el.nächstesGeschwister;
  23. }
  24.          Rücklaufelemente ;
  25. }

3. array.filter();

//Testen Sie alle Elemente mit der angegebenen Funktion und erstellen Sie ein neues Array mit allen Elementen, die den Test bestehen

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. // Kompatibel mit alter Umgebung   
  2. wenn (!Array.prototype.filter)
  3. {
  4. Array.prototype.filter = Funktion (fun /*, diesesArg */ )
  5. {
  6.      "streng verwenden" ;
  7.      wenn ( dies === void 0 || dies === null )
  8.        werfen   neuer TypeError();
  9.      var t = Objekt( dieses );
  10.      var len = t.Länge >>> 0;
  11.      wenn ( Typ von Spaß !== "Funktion" )
  12.        werfen   neuer TypeError();
  13.      var res = [];
  14.      var thisArg = Argumente.Länge >= 2? Argumente[1] : void 0;
  15.      für ( var i = 0; i < len; i++)
  16. {
  17.        wenn (i in t)
  18. {
  19.          var val = t[i];
  20.          // HINWEIS: Technisch sollte dies Object.defineProperty bei   
  21.          // der nächste Index, da Push beeinflusst werden kann durch   
  22.          // Eigenschaften von Object.prototype und Array.prototype.   
  23.          // Aber diese Methode ist neu und Kollisionen sollten   
  24.          // selten, verwenden Sie daher die kompatiblere Alternative.   
  25.          wenn (fun.call(thisArg, val, i, t))
  26. res.push(Wert);
  27. }
  28. }
  29.      Rückgabewert ;
  30. };
  31. }

4. array.fürJedes();
 // Das Array durchlaufen
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. //Kompatibel mit alter Umgebung   
  2. // Produktionsschritte von ECMA-262, Ausgabe 5, 15.4.4.18   
  3. // Referenz: http://es5.github.io/#x15.4.4.18   
  4. wenn (!Array.prototype.forEach) {
  5. Array.prototype.forEach = Funktion (Rückruf, diesesArg) {
  6.      var T, k;
  7.      wenn ( dies == null ) {
  8.        werfen   neuer TypeError( ' dies ist null oder nicht definiert' );
  9. }
  10.      // 1. O sei das Ergebnis des Aufrufs von toObject() und übergibt die   
  11.      // |diesen| Wert als Argument.   
  12.      var O = Objekt( dieses );
  13.      // 2. Lassen Sie lenValue das Ergebnis des Aufrufs von Get() internal sein.   
  14.      // Methode von O mit dem Argument „Länge“.   
  15.      // 3. Lass len toUint32(lenValue) sein.   
  16.      var len = O.Länge >>> 0;
  17.      // 4. Wenn isCallable(callback) false ist, werfen Sie einen TypeError   
  18. Ausnahme. // Siehe: http://es5.github.com/#x9.11   
  19.      wenn ( Typ des Rückrufs !== "Funktion" ) {
  20.        werfen   neuer TypeError(callback + ' ist keine Funktion' );
  21. }
  22.      // 5. Wenn thisArg angegeben wurde, lass T thisArg sein; sonst lass   
  23.      // T ist nicht definiert.   
  24.      if (Argumente.Länge > 1) {
  25. T = diesesArg;
  26. }
  27.      // 6. Sei k 0   
  28. k = 0;
  29.      // 7. Wiederholen, solange k < len   
  30.      während (k < Länge) {
  31.        var kWert;
  32.        // a. Lassen Sie Pk ToString(k) sein.   
  33.        // Dies ist implizit für LHS-Operanden des in-Operators   
  34.        // b. Lassen Sie kPresent das Ergebnis des Aufrufs von HasProperty sein   
  35.        // interne Methode von O mit Argument Pk.   
  36.        // Dieser Schritt kann mit c kombiniert werden   
  37.        // c. Wenn kPresent wahr ist, dann   
  38.        wenn (k in O) {
  39.          // i. Lassen Sie kValue das Ergebnis des Aufrufs von Get internal sein.   
  40.          // Methode von O mit Argument Pk.   
  41. kWert = O[k];
  42.          // ii. Rufen Sie die interne Callback-Methode mit T als   
  43.          // dieser Wert und die Argumentliste, die kValue, k und O enthält.   
  44. Rückruf.call(T, kValue, k, O);
  45. }
  46.        // d. Erhöhe k um 1.   
  47. k++;
  48. }
  49.      // 8. Rückgabe undefiniert   
  50. };
  51. }

5. Registrierungsveranstaltungen
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. .addEventListener = Funktion (Typ, Listener, UseCapture) { };
  2. //Der erste Parameter Ereignisname   
  3. //Der zweite Parameter der Ereignisverarbeitungsfunktion (Listener)   
  4. //Der dritte Parameter true erfasst false Bubble   
  5. //Wird erst nach IE9 unterstützt
  6. // Kompatibel mit alter Umgebung   
JavaScript CodeInhalt in die Zwischenablage kopieren
  1. var EventTools = {
  2. addEventListener: Funktion (Element, Ereignisname, Listener) {
  3.              //Fähigkeitstest   
  4.              wenn (element.addEventListener) {
  5. element.addEventListener(eventName, listener, false );
  6. } anders   wenn (element.attachEvent) {
  7. element.attachEvent( "on" + eventName, listener);
  8. } anders {
  9. Element [ "ein" + Ereignisname] = Listener;
  10. }
  11. },
  12.   
  13. // Um ​​ein Ereignis zu entfernen, können Sie keine anonyme Funktion verwenden   
  14. removeEventListener: Funktion (Element, Ereignisname, Listener) {
  15.              wenn (element.removeEventListener) {
  16. element.removeEventListener(eventName,listener, false );
  17. } anders   if (element.detachEvent) { //IE8 hat zuvor .attachEvent registriert und Ereignisse .detachEvent entfernt   
  18. element.detachEvent( "on" +eventName,listener);
  19. } anders {
  20. Element [ "ein" + Ereignisname] = null ;
  21. }
  22. }
  23. };

6. Ereignisobjekt

1) Der Ereignisparameter e ist das Ereignisobjekt, das auf standardmäßige Weise erhalten wird

btn.onclick = Funktion(e) { }

2) e.eventPhase Ereignisphase, wurde vor IE8 nicht unterstützt

3) e.target ist immer das Objekt, das das Ereignis ausgelöst hat (die Schaltfläche, auf die geklickt wurde)

i) srcElement vor IE8

ii) Browserkompatibilität

var Ziel = e.Ziel || Fenster.Ereignis.srcElement;

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. // Holen Sie sich das mit dem Browser kompatible Ereignisobjekt   
  2. getEvent: Funktion (e) {
  3.      return e || window.event; // e Standardmethode zum Abrufen des Ereignisobjekts; window.event ist die Methode zum Abrufen des Ereignisobjekts in IE8 und davor   
  4. }
  5. // kompatibel mit Ziel   
  6. getTarget: Funktion (e) {
  7.      gibt e.target zurück || e.srcElement;
  8. }

7. Ermitteln Sie die Mausposition auf der Seite

① Position im sichtbaren Bereich: e.clientX e.clientY

②Position im Dokument:

i) e.SeiteX e.SeiteY

ii) Browserkompatibilität

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  2.   
  3. var pageY = e.clientY + scrollTop;

8. Ermitteln Sie die Scrolldistanz der Seite

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. // Kompatible Browser   
  2. var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

9. Text abwählen

JavaScript CodeInhalt in die Zwischenablage kopieren
  1. // Kompatible Browser   
  2. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

Die obige kurze Diskussion zu Browserkompatibilitätsproblemen in JavaScript ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<:  Docker-Container sichert regelmäßig die Datenbank und sendet sie an das angegebene Postfach (Designidee)

>>:  So verwenden Sie vue3+TypeScript+vue-router

Artikel empfehlen

Nachdem Sie die Einführung des CSS-Boxmodells gelesen haben, werden Sie nicht verwirrt sein

Im Webdesign hört man oft die Eigenschaftsnamen „...

Vue implementiert die Shake-Funktion (kompatibel mit ios13.3 und höher)

Vor Kurzem habe ich mit shake.js eine ähnliche Fu...

Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

Inhaltsverzeichnis $nächsterTick() $forceUpdate()...

Implementierung der One-Click-TLS-Verschlüsselung für die Docker-Remote-API

Inhaltsverzeichnis 1. Ändern Sie den Port 2375 vo...

Lösung für Indexfehler in MySQL aufgrund unterschiedlicher Feldzeichensätze

Was ist ein Index? Warum einen Index erstellen? I...

Warum der CSS-Attributwert clear:right im Detail nicht funktioniert

Die Verwendung der Clear-Eigenschaft zum Löschen v...

JS realisiert die automatische Wiedergabe der Timeline

Vor kurzem habe ich einen solchen Effekt implemen...

Einführung in semantische HTML-Tags

In den letzten Jahren war DIV+CSS bei der Website-...

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen...

Wachstumserfahrung eines Webdesigners

<br />Vorab muss ich sagen, dass ich ein abs...

Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks

Inhaltsverzeichnis mvc MVP mvv Die Quelle von Vue...

Vue+Element+Springboot zum Implementieren eines Beispiels für die Anzeigefunktion des Fortschrittsbalkens beim Dateidownload

Inhaltsverzeichnis 1. Nachfragehintergrund 2. Opt...

Detaillierte Erklärung der allgemeinen Verwendung von Pseudoklassen vor und nach in CSS3

Die Pseudoklasse „Before/After“ entspricht dem Ei...

So zeichnen Sie eine Mindmap in einem Miniprogramm

Inhaltsverzeichnis Was ist eine Mindmap? Wie zeic...

Detaillierte Erklärung des Fischschwarm-Algorithmus im CocosCreator-Spiel

Vorwort Ich wollte vor kurzem CocosCreator lernen...