Problèmes de compatibilité du navigateur dans JS

Cet article présente principalement des informations pertinentes sur l'événement DOMContentLoaded que JS est compatible avec tous les navigateurs. Dans les navigateurs standards, nous pouvons utiliser l'événement DOMContentLoaded pour répondre à nos exigences. Il est également extrêmement simple d'enregistrer la fonction de traitement d'événement. peuvent apprendre ensemble.

Lors de l'utilisation de JavaScript pour faire fonctionner des éléments dom, le code permettant d'obtenir les éléments dom est généralement placé dans la fonction de gestionnaire de fichiers window.onload=function(){}事, mais l'événement window.onload peut affecter l'expérience client après un certain démarrage. , car vous devez attendre que tous les scripts, codes CSS, images et autres contenus soient chargés avant de déclencher cet événement. Surtout si la quantité d'images est importante, cela affectera sérieusement l'expérience client. Bien souvent, il suffit que la structure DOM soit chargée. $(document).ready(function(){}) de jQuery implémente cette fonction. Voici une introduction à la façon dont JavaScript natif implémente cette fonction.

Introduction au processus de mise en œuvre :

Dans les navigateurs standards, nous pouvons utiliser l'événement DOMContentLoaded pour répondre à nos exigences, et l'enregistrement des gestionnaires d'événements est aussi extrêmement simple.

Le code est le suivant :

addEventListener(‘DOMContentLoaded',fn,false)

Cependant, IE8 et les navigateurs inférieurs à IE8 ne prennent pas en charge l'événement DOMContentLoaded, une autre méthode est donc nécessaire pour résoudre ce problème.

De nombreux amis peuvent penser que le fait que le statut document.readyState de l'événement document.onreadystatechange soit égal à terminé est utilisé pour déterminer si la structure dom est chargée. Cependant, après le test, la tâche ne peut pas être terminée. la page utilise une iframe pour introduire des sous-pages, il y aura des problèmes.

La solution est la suivante :

La méthode doScroll propre aux versions inférieures des navigateurs IE Lorsque la structure dom n'a pas été chargée, l'appel de cette méthode signalera une erreur, vous pourrez donc appeler cette méthode en continu via la fonction timer et la combiner avec l'instruction try catch pour implémenter la fonction de jugement :

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
});

Le code est le suivant :

Le. Le code implémente l'effet DOMContentLoaded qui est compatible avec tous les navigateurs. Présentons-le ci-dessous son processus d'implémentation.

1. Commentaires de code :

(1).eventQueue = [], déclarez un tableau vide pour la file d'attente des fonctions à exécuter .

(2).isReady = false, déclarez une variable et attribuez la valeur initiale à false Si c'est vrai, cela signifie que le dom a été chargé.

(3).isBind = false, déclarez une variable et attribuez la valeur initiale à false. Si c'est vrai, cela signifie que la fonction de traitement du temps est liée.

(4).function domReady(fn){}, cette fonction implémente la fonction d'attendre que le dom soit chargé avant d'exécuter la fonction fn.

(5).if(isReady){fn.call(window);}, si la valeur de la variable est vraie, exécutez la fonction directement.

(6).else{eventQueue.push(fn);}, ajoutez la fonction à exécuter au tableau.

(7).bindReady(), cette fonction peut réaliser la fonction de traitement des événements d'enregistrement.

(8).if(isReady) return, s'il est égal à true, sort directement de la fonction À ce moment, la fonction fn a été exécutée.

(9).if(isBind) return, s'il a déjà été enregistré, il n'est pas nécessaire de le faire une seconde fois.

(10).isBind=true, changez la valeur de la variable en true.

(11).if(window.addEventListener){document.addEventListener('DOMContentLoaded',execFn,false);}, s'il s'agit d'un navigateur standard, utilisez addEventListener pour enregistrer la fonction de traitement des événements.

(12).else if(window.attachEvent){doScroll();}, si le navigateur est IE8 ou inférieur, appelez la méthode doScroll pour obtenir cet effet.

(13).function doScroll(){}, cette fonction peut utiliser la fonction timer pour appeler en continu la fonction doScroll() Si une erreur est signalée, continuez à appeler, sinon la structure dom est chargée. . Ainsi, les fonctions pertinentes sont exécutées.

(14).function execFn(){}, cette fonction peut retirer la fonction à exécuter du tableau, puis l'exécuter, et enfin effacer le tableau.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment calculer le centroïde d'un polygone en JavaScript

Comment utiliser le sélecteur de commutateur dans l'applet WeChat

Interprétation détaillée des problèmes d'erreur 404 d'Angular

Comment utiliser le composant slider dans les mini-programmes WeChat

Comment mémoriser les mots de passe sur les cookies en vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!