Comment détecter les modifications dans « location.href » à l'aide de MutationObserver dans les scripts Greasemonkey ?

Écoute des événements modifiés par Location.href

Lors de l'écriture de scripts Greasemonkey, vous devez parfois effectuer certaines opérations lorsque le site Web modifie location.href . Cet article décrit une manière de répondre à ce changement en utilisant des observateurs de mutations DOM au lieu de délais d'attente et d'interrogations fastidieux.

Solution

<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;
            // 执行相关的操作
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

Ce script utilise un observateur de mutation DOM pour écouter les changements dans tout le document, y compris les changements au sein de l'élément body. Lorsqu'un changement de location.href est détecté, il déclenchera la fonction de rappel de l'observateur, où vous pourrez effectuer toutes les actions de votre choix.

Avec les dernières spécifications JavaScript

<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;
      // 执行相关的操作
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

Ce script utilise les dernières spécifications JavaScript avec les fonctions fléchées ES6 et la méthode d'observation. Il est équivalent au script ci-dessus et fournit un moyen plus propre d'écouter les modifications de location.href.

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!