Wie erkennt man URL-Änderungen in JavaScript und reagiert darauf?

So lösen Sie ein Ereignis aus, wenn sich die URL ändert

Bei der Entwicklung von Greasemonkey-Skripten für Websites, die die window.location.href regelmäßig ändern, ist dies der Fall Oft ist es erforderlich, als Reaktion auf diese URL-Änderungen bestimmte Aktionen durchzuführen. Der Einsatz von Polling oder Timeouts als mögliche Lösungen kann jedoch ineffizient sein.

Um solche Probleme zu vermeiden, stellen wir eine äußerst effektive Methode vor, die die MutationObserver-API nutzt. Durch die Überwachung von Änderungen innerhalb des Body-Elements kann dieses Skript URL-Änderungen effektiv erkennen und Zugriff auf das DOM des geänderten Dokuments bereitstellen:

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;
            /* Insert your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};

Wenn Sie alternativ einen prägnanteren und moderneren Ansatz bevorzugen, können Sie Folgendes verwenden Skript, das die neueste JavaScript-Spezifikation nutzt:

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

window.onload = observeUrlChange;

Mit dieser Methode können Sie die gewünschte Funktionalität an das Ereignis anhängen, das ausgelöst wird, wenn sich die URL ändert, und so Zugriff auf das DOM des geänderten Dokuments ermöglichen.

Das obige ist der detaillierte Inhalt vonWie erkennt man URL-Änderungen in JavaScript und reagiert darauf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!