JavaScript - zdarzenie zmiany lokalizacji / zdarzenie zmiany adresu URL

W tym krótkim artykule chcielibyśmy pokazać, jak za pomocą JavaScript wykryć, czy adres URL strony (obiekt location) został zmieniony.

W JavaScript nie ma zdarzenia locationchange, ale jest kilka sztuczek, jak to zrobić.

Szybkie rozwiązanie:

xxxxxxxxxx

// Umieść poniższy kod na samej górze elementu head:

​

;(function() {

    var pushState = history.pushState;

    var replaceState = history.replaceState;

​

    history.pushState = function() {

        pushState.apply(history, arguments);

        window.dispatchEvent(new Event('pushstate'));

        window.dispatchEvent(new Event('locationchange'));

    };

​

    history.replaceState = function() {

        replaceState.apply(history, arguments);

        window.dispatchEvent(new Event('replacestate'));

        window.dispatchEvent(new Event('locationchange'));

    };

​

    window.addEventListener('popstate', function() {

        window.dispatchEvent(new Event('locationchange'))

    });

})();

​

// Przykład użycia

​

window.addEventListener('locationchange', function(){

    console.log('onlocationchange event occurred!');

})

Ze zmianą monitorowania location związane są trzy przypadki:

1. zmiana adresu URL z interfejsu przeglądarki przez użytkownika powoduje przeładowanie całej strony i wykonanie dwóch operacji: rozładuj i załaduj stronę - to tylko otwarcie nowej strony,
2. location zmieniony przez History API (pushState,  replaceState, popState) nie powoduje przeładowania strony. API nie zapewnia również żadnego zdarzenia locationchange. Konieczne jest wywołanie logiki po metodach, np

1. Copy

   xxxxxxxxxx

    

   1

   history.pushState(...);

   2

   callEventLogic();

   3

   ​

   4

   // ...

   5

   ​

   6

   history.popState(...);

   7

   callEventLogic();

   8

   ​

   9

   // etc.
2. hash zmieniony w url (location.hash) jest dostarczany przez oddzielne zdarzenie:
   Copy

   xxxxxxxxxx

    

   1

   window.addEventListener('hashchange', function(){

   2

       console.log('onhashchange event occurred!');

   3

   })

Podsumowanie: konieczne jest dodanie własnej obsługi zdarzeń locationchange, o czym mowa w drugim punkcie powyższej listy i co zostało przedstawione również w Szybkim rozwiązaniu.