Comment détecter et répondre aux modifications d'URL en JavaScript ?

Comment déclencher un événement lorsque l'URL change

Lors du développement de scripts Greasemonkey pour des sites Web qui modifient périodiquement le window.location.href, il est il est souvent nécessaire d'effectuer des actions spécifiques en réponse à ces modifications d'URL. Cependant, utiliser des interrogations ou des délais d'attente comme solutions potentielles peut s'avérer inefficace.

Pour éviter de tels problèmes, nous présentons une méthode très efficace qui utilise l'API MutationObserver. En surveillant les modifications au sein de l'élément body, ce script peut détecter efficacement les modifications d'URL et donner accès au DOM du document modifié :

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

Alternativement, si vous préférez une approche plus concise et moderne, vous pouvez utiliser ce qui suit script, qui exploite la dernière spécification 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;
      /* Insert your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;

Cette méthode vous permet d'attacher la fonctionnalité souhaitée à l'événement déclenché lorsque l'URL change, donnant accès au DOM du document modifié.

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!