Probleme mit der Browserkompatibilität in JS

In diesem Artikel werden hauptsächlich relevante Informationen zum DOMContentLoaded-Ereignis vorgestellt. In Standardbrowsern können wir das DOMContentLoaded-Ereignis verwenden, um unsere Anforderungen zu erfüllen kann gemeinsam lernen.

Wenn Sie JavaScript zum Betreiben von Dom-Elementen verwenden, wird der Code zum Abrufen von Dom-Elementen normalerweise in der Dateihandlerfunktion window.onload=function(){}事 abgelegt, aber das Ereignis window.onload kann sich nach einiger Zeit auf das Kundenerlebnis auswirken , weil Sie müssen warten, bis alle Skripte, CSS-Codes, Bilder und andere Inhalte geladen sind, bevor dieses Ereignis ausgelöst wird. Insbesondere wenn die Anzahl der Bilder groß ist, wird dies das Kundenerlebnis erheblich beeinträchtigen. In vielen Fällen muss nur die DOM-Struktur geladen werden. $(document).ready(function(){}) implementiert diese Funktion. Hier finden Sie eine Einführung, wie natives JavaScript diese Funktion implementiert.

Einführung in den Implementierungsprozess:

In Standardbrowsern können wir das DOMContentLoaded-Ereignis verwenden, um unsere Anforderungen zu erfüllen, und die Registrierung von Ereignishandlern erfolgt auch extrem einfach.

Der Code lautet wie folgt:

addEventListener(‘DOMContentLoaded',fn,false)

Allerdings unterstützen IE8 und Browser unter IE8 das DOMContentLoaded-Ereignis nicht, daher ist ein anderer Weg erforderlich, um dieses Problem zu lösen.

Viele Freunde denken vielleicht, dass die Frage, ob der document.readyState-Status des document.onreadystatechange-Ereignisses gleich „abgeschlossen“ ist, verwendet wird, um zu bestimmen, ob die Dom-Struktur geladen ist. Nach dem Testen kann die Aufgabe jedoch nicht abgeschlossen werden Wenn die Seite einen Iframe verwendet, um Unterseiten einzuleiten, kann es zu Problemen kommen.

Die Lösung lautet wie folgt:

Die doScroll-Methode, die nur für niedrigere Versionen von IE-Browsern gilt. Wenn die Dom-Struktur nicht geladen wurde, Wenn Sie diese Methode aufrufen, wird ein Fehler gemeldet, sodass Sie diese Methode kontinuierlich über die Timer-Funktion aufrufen und mit der try-catch-Anweisung kombinieren können, um die Beurteilungsfunktion zu implementieren. Der Code lautet wie folgt:

eventQueue = [];
isReady = false;
isBind = false;
function domReady(fn){
 if(isReady){
  fn.call(window);
 }
 else{
  eventQueue.push(fn);
 };
 bindReady();
};
function bindReady(){
 if(isReady) return;
  if(isBind) return;
  isBind=true;
  if(window.addEventListener){
   document.addEventListener('DOMContentLoaded',execFn,false);
  }
  else if(window.attachEvent){
   doScroll();
  };
};
function doScroll(){
 try{
  document.documentElement.doScroll('left');
 }
 catch(error){
  return setTimeout(doScroll,20);
 };
 execFn();
};
function execFn(){
 if(!isReady){
  isReady=true;
  for(var index=0;i<eventQueue.length;index++){
   eventQueue[index].call(window);
  };
  eventQueue = [];
 };
};
domReady(function(){
 //code
});
domReady(function(){
 //code
});

Der Code wird implementiert Der DOMContentLoaded-Effekt ist mit allen Browsern kompatibel. Hier finden Sie eine Einführung in den Implementierungsprozess.

1. Codekommentare:

(1).eventQueue = [], deklariere ein leeres Array für die auszuführende Funktionswarteschlange.

(2).isReady = false, deklarieren Sie eine Variable und weisen Sie den Anfangswert false zu. Wenn er wahr ist, bedeutet dies, dass der Dom geladen wurde.

(3).isBind = false, eine Variable deklarieren und den Anfangswert false zuweisen. Wenn dies wahr ist, bedeutet dies, dass die Zeitverarbeitungsfunktion gebunden ist.

(4).function domReady(fn){}, diese Funktion implementiert die Funktion, auf das Laden des Doms zu warten, bevor die fn-Funktion ausgeführt wird.

(5).if(isReady){fn.call(window);}, wenn der Variablenwert wahr ist, führen Sie die Funktion direkt aus.

(6).else{eventQueue.push(fn);}, fügen Sie die auszuführende Funktion zum Array hinzu.

(7).bindReady(), diese Funktion kann die Funktion zur Verarbeitung von Registrierungsereignissen realisieren.

(8).if(isReady) return, falls gleich true, direkt aus der Funktion springen. Zu diesem Zeitpunkt wurde die fn-Funktion ausgeführt.

(9).if(isBind) return, wenn es bereits registriert wurde, ist es nicht nötig, es ein zweites Mal zu tun.

(10).isBind=true, ändern Sie den Wert der Variablen in true.

(11).if(window.addEventListener){document.addEventListener('DOMContentLoaded',execFn,false);}, wenn es sich um einen Standardbrowser handelt, verwenden Sie addEventListener, um die Ereignisverarbeitungsfunktion zu registrieren.

(12).else if(window.attachEvent){doScroll();}, wenn der Browser IE8 oder niedriger ist, rufen Sie die doScroll-Methode auf, um diesen Effekt zu erzielen.

(13).function doScroll(){}, diese Funktion kann die Timer-Funktion verwenden, um die Funktion doScroll() kontinuierlich aufzurufen. Wenn ein Fehler gemeldet wird, rufen Sie ihn weiterhin auf, andernfalls wird die Dom-Struktur geladen . Damit werden die entsprechenden Funktionen ausgeführt.

(14).function execFn(){}, diese Funktion kann die auszuführende Funktion aus dem Array herausnehmen, sie dann ausführen und schließlich das Array löschen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So berechnen Sie den Polygonschwerpunkt in JavaScript

So verwenden Sie die Schalterauswahl im WeChat-Applet

Detaillierte Interpretation der Angular-Fehler 404-Probleme

So verwenden Sie die Slider-Komponente in WeChat-Miniprogrammen

So merken Sie sich Passwörter für Cookies in Vue

Das obige ist der detaillierte Inhalt vonProbleme mit der Browserkompatibilität in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!