Comment puis-je détecter et gérer les modifications de navigation dans une page Web à l'aide de JavaScript ?

Gérer les modifications de navigation avec les écouteurs d'événements

Lorsque l'utilisateur accède à une nouvelle URL dans une page Web, il peut être difficile de capturer l'événement et accédez au DOM de la page nouvellement chargée. Pour résoudre ce problème, nous explorerons une solution utilisant la puissante API d'observation de JavaScript.

Observation des mutations DOM
Au lieu de nous fier aux délais d'attente ou aux interrogations, nous pouvons utiliser un MutationObserver pour surveiller les modifications apportées à l'arborescence DOM. En observant le élément, nous pouvons détecter quand le contenu de la page a été modifié en raison d'un emplacement altéré.href.

Exemple d'implémentation
Voici un extrait de code qui démontre l'utilisation de MutationObserver pour surveiller la fenêtre Modifications de .location.href :

<code class="javascript">var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Changed ! your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

Dernière spécification JavaScript
Dans JavaScript moderne, vous pouvez utiliser des fonctions fléchées et une syntaxe légèrement simplifiée pour obtenir la même fonctionnalité :

<code class="javascript">const observeUrlChange = () => {
  let oldHref = document.location.href;
  const body = document.querySelector('body');
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href;
      /* Changed ! your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

En utilisant cette approche basée sur les événements, vous pouvez éviter les interrogations ou les délais d'attente et capturer les modifications d'URL de manière performante et fiable. Cela vous permet d'accéder au DOM de la page nouvellement chargée et d'exécuter les actions souhaitées chaque fois que l'utilisateur navigue dans la même page Web.

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!