Languages
[Edit]
PL

JavaScript - zdarzenie zmiany lokalizacji / zdarzenie zmiany adresu URL

0 points
Created by:
Admin Dirask Community
1660

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:

// 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!');
})

Lepszy opis problemu

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. history.pushState(...);
    callEventLogic();
    
    // ...
    
    history.popState(...);
    callEventLogic();
    
    // etc.
  2. hash zmieniony w url (location.hash) jest dostarczany przez oddzielne zdarzenie:
    window.addEventListener('hashchange', function(){
        console.log('onhashchange event occurred!');
    })

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.

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join