Ako zistiť zmenu URL adresy v JavaScripte bez refreshnutia stránky (cez ajax)

let lastUrl = location.href; 
new MutationObserver(() => {
  const url = location.href;
  if (url !== lastUrl) {
    lastUrl = url;
    onUrlChange();
  }
}).observe(document, {subtree: true, childList: true});
 
 
function onUrlChange() {
  alert('URL changed!', location.href);
}

Funkcia MutationObserver()sa používa na zistenie alebo sledovanie zmien vykonaných v strome DOM. Jednoducho zisťuje zmeny prvku DOM a tiež zmeny adresy URL na jednostránkových webových stránkach, ako sú React JS a Angular JS.

Vysvetlenie funkcie:

  • V uvedenom kóde najprv vezmeme aktuálnu adresu URL stránky pomocou location.href;
  • Potom použijeme metódu MutationObserver, ktorá observe() nakonfiguruje spätné volanie MutationObserver, aby začalo dostávať upozornenia na zmeny v DOM , ktoré zodpovedajú daným možnostiam.
  • Nakoniec porovnáme adresy URL a potom zavoláme funkciu, ktorá vyzve novú adresu URL umiestnenia.

zdroj:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená.