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

Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

Wirkung: Ideen: Verwenden Sie das Eingabetypattri...

So wählen Sie das Format bei der Verwendung von Binlog in MySQL

Inhaltsverzeichnis 1. Drei Binlog-Modi 1.Anweisun...

Wie implementiert MySQL ACID-Transaktionen?

Vorwort Kürzlich wurde ich in einem Interview gef...

Tutorial zum Erstellen eines SVN-Servers mit Docker

SVN ist die Abkürzung für Subversion, ein Open-So...

Lösen Sie das Problem, dass bei der Installation von MySQL unter Linux keine my.cnf-Datei in /etc vorhanden ist

Heute wollte ich den MySQL-Port ändern, habe jedo...

Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)

Code kopieren Der Code lautet wie folgt: @Zeichen...

Eine kurze Erläuterung der Unterstützung von Gleitkommaoperationen durch den Linux-Kernel

Derzeit unterstützen die meisten CPUs Gleitkommae...

So verbinden Sie JDBC mit MySQL 5.7

1. Bereiten Sie zunächst die MySQL- und Eclipse-U...

Prinzip der Ereignisdelegierung in JavaScript

Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....

Docker realisiert die Verbindung mit demselben IP-Netzwerksegment

Vor Kurzem habe ich das Problem gelöst, dass Dock...

Detaillierte Erklärung zur Verwendung des Linux-Befehls Traceroute

Mithilfe von Traceroute können wir den Pfad ermit...

So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux

Informationen zur ersten Installation der MySQL-5...

Beispielcode für reinen CSS-Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts

1. Prozentuale Basis für Elementbreite/-höhe/-pol...

JavaScript imitiert den Jingdong-Karusselleffekt

In diesem Artikel wird der spezifische Code für J...

Quellcode der HTML-Einstellungen für die Benutzerregistrierungsseite

Gestalten Sie die oben gezeigte Webseite: <!DOC...