Événement lorsque window.location.href change

Question

J'écris un script Greasemonkey pour un site qui à un moment donné modifie location.href .

Comment puis-je obtenir un événement (via window.addEventListener ou quelque chose de similaire) lorsque window.location.href change sur une page? J'ai également besoin d'accéder au DOM du document pointant vers l'url nouvelle / modifiée.

J'ai vu d'autres solutions qui impliquent des délais d'attente et des sondages, mais j'aimerais éviter cela si possible.

Answer 1

J'utilise ce script dans mon extension "Grab Any Media" et fonctionne très bien ( comme le cas youtube )

 var oldHref = document.location.href;

window.onload = function() {

    var
         bodyList = document.querySelector("body")

        ,observer = new MutationObserver(function(mutations) {

            mutations.forEach(function(mutation) {

                if (oldHref != document.location.href) {

                    oldHref = document.location.href;

                    /* Changed ! your code here */

                }

            });

        });

    var config = {
        childList: true,
        subtree: true
    };

    observer.observe(bodyList, config);

};

Answer 2

Vous ne pouvez pas éviter le sondage, il n'y a aucun événement pour le changement href.

L'utilisation d'intervalles est de toute façon assez légère si vous n'exagérez pas. Vérifier le href toutes les 50 ms environ n'aura aucun effet significatif sur les performances si cela vous inquiète.

Answer 3

Il existe un onhashchange par défaut que vous pouvez utiliser.

Documenté ICI

Et peut être utilisé comme ceci:

 function locationHashChanged( e ) {
    console.log( location.hash );
    console.log( e.oldURL, e.newURL );
    if ( location.hash === "#pageX" ) {
        pageX();
    }
}

window.onhashchange = locationHashChanged;

Si le navigateur ne prend pas en charge oldURL et newURL vous pouvez le lier comme ceci:

 //let this snippet run before your hashChange event binding code
if( !window.HashChangeEvent )( function() {
    let lastURL = document.URL;
    window.addEventListener( "hashchange", function( event ) {
        Object.defineProperty( event, "oldURL", { enumerable: true, configurable: true, value: lastURL } );
        Object.defineProperty( event, "newURL", { enumerable: true, configurable: true, value: document.URL } );
        lastURL = document.URL;
    } );
} () );

Answer 4

Grâce à Jquery , essayez simplement

 $(window).on('beforeunload', function () {
    //your code goes here on location change 
});

En utilisant javascript :

 window.addEventListener("beforeunload", function (event) {
   //your code goes here on location change 
});

Document de référence: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload