{"id":1833,"date":"2022-07-18T15:26:18","date_gmt":"2022-07-18T13:26:18","guid":{"rendered":"https:\/\/www.areaweb.sk\/?p=1833"},"modified":"2022-08-08T13:52:45","modified_gmt":"2022-08-08T11:52:45","slug":"ako-zistit-zmenu-url-adresy-v-javascripte-bez-refreshnutia-stranky-cez-ajax","status":"publish","type":"post","link":"https:\/\/www.areaweb.sk\/cs\/ako-zistit-zmenu-url-adresy-v-javascripte-bez-refreshnutia-stranky-cez-ajax\/","title":{"rendered":"Ako zisti\u0165 zmenu URL adresy v JavaScripte bez refreshnutia str\u00e1nky (cez ajax)"},"content":{"rendered":"<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>let lastUrl = location.href; \nnew MutationObserver(() =&gt; {\n  const url = location.href;\n  if (url !== lastUrl) {\n    lastUrl = url;\n    onUrlChange();\n  }\n}).observe(document, {subtree: true, childList: true});\n \n \nfunction onUrlChange() {\n  alert('URL changed!', location.href);\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.areaweb2.pppcreative.sk\/wp-content\/uploads\/2022\/07\/url-1024x512.png\" alt=\"\" class=\"wp-image-1834\" width=\"512\" height=\"256\" srcset=\"https:\/\/www.areaweb.sk\/wp-content\/uploads\/2022\/07\/url-1024x512.png 1024w, https:\/\/www.areaweb.sk\/wp-content\/uploads\/2022\/07\/url-300x150.png 300w, https:\/\/www.areaweb.sk\/wp-content\/uploads\/2022\/07\/url-768x384.png 768w, https:\/\/www.areaweb.sk\/wp-content\/uploads\/2022\/07\/url-600x300.png 600w, https:\/\/www.areaweb.sk\/wp-content\/uploads\/2022\/07\/url.png 1300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Funkcia&nbsp;<strong><code>MutationObserver()<\/code><\/strong>sa pou\u017e\u00edva na zistenie alebo sledovanie zmien vykonan\u00fdch v strome DOM.&nbsp;Jednoducho zis\u0165uje zmeny prvku DOM a tie\u017e zmeny adresy URL na jednostr\u00e1nkov\u00fdch webov\u00fdch str\u00e1nkach, ako s\u00fa React JS a Angular JS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vysvetlenie funkcie:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>V  uvedenom k\u00f3de najprv vezmeme aktu\u00e1lnu adresu URL str\u00e1nky pomocou location.href;<\/li><li>Potom pou\u017eijeme met\u00f3du MutationObserver, ktor\u00e1 observe() nakonfiguruje sp\u00e4tn\u00e9 volanie MutationObserver, aby za\u010dalo dost\u00e1va\u0165 upozornenia na zmeny v DOM , ktor\u00e9 zodpovedaj\u00fa dan\u00fdm mo\u017enostiam.<\/li><li>Nakoniec porovn\u00e1me adresy URL a potom zavol\u00e1me funkciu, ktor\u00e1 vyzve nov\u00fa adresu URL umiestnenia.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">zdroj:<br><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MutationObserver\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/MutationObserver<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>let lastUrl = location.href; new MutationObserver(() => { const url = location.href; if (url !== lastUrl) { lastUrl = url; onUrlChange(); } }).observe(document, {subtree: true, childList: true}); function onUrlChange()\u2026<\/p>","protected":false},"author":1,"featured_media":1834,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-1833","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/1833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":0,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/1833\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media\/1834"}],"wp:attachment":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media?parent=1833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/categories?post=1833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/tags?post=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}