Maison > interface Web > js tutoriel > Comment exécuter du code lorsque l'URL de la page change avec MutationObserver dans Greasemonkey ?

Comment exécuter du code lorsque l'URL de la page change avec MutationObserver dans Greasemonkey ?

DDD
Libérer: 2024-10-29 03:59:29
original
413 Les gens l'ont consulté

How to Execute Code When the Page's URL Changes with MutationObserver in Greasemonkey?

Comment exécuter du code lorsque l'URL d'une page change

Dans le contexte des scripts Greasemonkey, il devient nécessaire de répondre aux modifications apportées à l'URL d'une page. URL (location.href) efficacement. Pour y parvenir sans introduire de délais d'attente ou d'interrogation, envisagez d'utiliser l'API MutationObserver.

Solution utilisant MutationObserver

  1. Initialisez l'ancienne URL :

    <code class="js">var oldHref = document.location.href;</code>
    Copier après la connexion
  2. Attacher un MutationObserver à l'élément body :

    <code class="js">window.onload = function() {
        var bodyList = document.querySelector('body');
    
        var observer = new MutationObserver(function(mutations) {
            if (oldHref != document.location.href) {
                oldHref = document.location.href;
                /* Execute your code here */
            }
        });
    
        var config = {
            childList: true,
            subtree: true
        };
    
        observer.observe(bodyList, config);
    };</code>
    Copier après la connexion

Dernière spécification JavaScript

Pour les navigateurs modernes prenant en charge la dernière spécification JavaScript, utilisez la syntaxe simplifiée suivante :

<code class="js">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;
      /* Execute your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>
Copier après la connexion

En utilisant MutationObserver, vous pouvez capturer efficacement les modifications d'URL et déclencher l'exécution de code personnalisé sans recourir à des techniques d'interrogation peu fiables.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal