How to detect if URL has changed after hash in JavaScript

Question

How can I check if a URL has changed in JavaScript  For example  websites like GitHub  which use AJAX  will append page information after a   symbol to create a unique URL without reloading the page  What is the best way to detect if this URL changes    Is the onload event called again  Is there an event handler for the URL  Or must the URL be checked every second to detect a change

User · Answer

Found a working answer in a separate thread:

There's no one event that will always work, and monkey patching the pushState event is pretty hit or miss for most major SPAs.

So smart polling is what's worked best for me. You can add as many event types as you like, but these seem to be doing a really good job for me.

Written for TS, but easily modifiable:

const locationChangeEventType = "MY_APP-location-change";

// called on creation and every url change
export function observeUrlChanges(cb: (loc: Location) => any) {
  assertLocationChangeObserver();
  window.addEventListener(locationChangeEventType, () => cb(window.location));
  cb(window.location);
}

function assertLocationChangeObserver() {
  const state = window as any as { MY_APP_locationWatchSetup: any };
  if (state.MY_APP_locationWatchSetup) { return; }
  state.MY_APP_locationWatchSetup = true;

  let lastHref = location.href;

  ["popstate", "click", "keydown", "keyup", "touchstart", "touchend"].forEach((eventType) => {
    window.addEventListener(eventType, () => {
      requestAnimationFrame(() => {
        const currentHref = location.href;
        if (currentHref !== lastHref) {
          lastHref = currentHref;
          window.dispatchEvent(new Event(locationChangeEventType));
        }
      })
    })
  });
}

Usage

observeUrlChanges((loc) => {
  console.log(loc.href)
})

User · Answer

EDIT after a bit of researching   It somehow seems that I have been fooled by the documentation present on Mozilla docs  The popstate event  and its callback function onpopstate  are not triggered whenever the pushState   or replaceState   are called in code  Therefore the original answer does not apply in all cases   However there is a way to circumvent this by monkey-patching the functions according to  alpha123   var pushState   history pushState  history pushState   function          pushState apply history  arguments       fireEvents  pushState   arguments       Some event-handling function      Original answer  Given that the title of this question is  How to detect URL change  the answer  when you want to know when the full path changes  and not just the hash anchor   is that you can listen for the popstate event   window onpopstate   function event      console log  location      document location      state      JSON stringify event state         Reference for popstate in Mozilla Docs  Currently  Jan 2017  there is support for popstate from 92  of browsers worldwide

User · Answer

I wanted to be able to add locationchange event listeners  After the modification below  we ll be able to do it  like this window addEventListener  locationchange   function        console log  location changed         In contrast  window addEventListener  hashchange      gt     would only fire if the part after a hashtag in a url changes  and window addEventListener  popstate      gt     doesn t always work  This modification  similar to Christian s answer  modifies the history object to add some functionality  By default  before these modifications  there s a popstate event  but there are no events for pushstate  and replacestate  This modifies these three functions so that all fire a custom locationchange event for you to use  and also pushstate and replacestate events if you want to use those  These are the modifications  history pushState     f   gt  function pushState        var ret   f apply this  arguments       window dispatchEvent new Event  pushstate         window dispatchEvent new Event  locationchange         return ret     history pushState    history replaceState     f   gt  function replaceState        var ret   f apply this  arguments       window dispatchEvent new Event  replacestate         window dispatchEvent new Event  locationchange         return ret     history replaceState    window addEventListener  popstate      gt       window dispatchEvent new Event  locationchange          Note  We re creating a closure  old    f  gt function new   f         old  replaces old with a new function that contains the previous old saved within it  old is not run at this moment  but it will be run inside of new

User · Answer

The answer below comes from here with old javascript syntax no arrow function  support IE 10     https   stackoverflow com a 52809105 9168962   function       if  typeof window CustomEvent      function   return false     If not IE   function CustomEvent event  params        params   params     bubbles  false  cancelable  false  detail  null       var evt   document createEvent  CustomEvent        evt initCustomEvent event  params bubbles  params cancelable  params detail       return evt        window CustomEvent   CustomEvent          function       history pushState   function  f        return function pushState           var ret   f apply this  arguments         window dispatchEvent new CustomEvent  pushState           window dispatchEvent new CustomEvent  locationchange           return ret             history pushState     history replaceState   function  f        return function replaceState           var ret   f apply this  arguments         window dispatchEvent new CustomEvent  replaceState           window dispatchEvent new CustomEvent  locationchange           return ret             history replaceState     window addEventListener  popstate   function         window dispatchEvent new CustomEvent  locationchange

User · Answer

use this code  window onhashchange   function             code       with jQuery    window  bind  hashchange   function            code

User · Answer

this solution worked for me  var oldURL    quot  quot   var currentURL   window location href  function checkURLchange currentURL       if currentURL    oldURL           alert  quot url changed  quot            oldURL   currentURL             oldURL   window location href      setTimeout function             checkURLchange window location href          1000      checkURLchange

User · Answer

With jquery  and a plug-in  you can do    window  bind  hashchange   function         things          http   benalman com projects jquery-hashchange-plugin   Otherwise yes  you would have to use setInterval and check for a change in the hash event  window location hash   Update  A simple draft  function hashHandler        this oldHash   window location hash      this Check       var that   this      var detect   function            if that oldHash  window location hash               alert  HASH CHANGED - new has    window location hash               that oldHash   window location hash                       this Check   setInterval function    detect      100      var hashDetection   new hashHandler

User · Answer

Another simple way you can do this is by adding a click event  through a class name  to the anchor tags on the page to detect when it has been clicked  then you can now use the window location href to get the url data which you can use to run your ajax request to the server  Simple and Easy

User · Answer

Look at the jQuery unload function  It handles all the things   https   api jquery com unload      The unload event is sent to the window element when the user navigates away from the page  This could mean one of many things  The user could have clicked on a link to leave the page  or typed in a new URL in the address bar  The forward and back buttons will trigger the event  Closing the browser window will cause the event to be triggered  Even a page reload will first create an unload event      window  unload      function event            alert  navigating

User · Answer

While doing a little chrome extension  I faced the same problem with an additionnal problem   Sometimes  the page change but not the URL   For instance  just go to the Facebook Homepage  and click on the  Home  button  You will reload the page but the URL won t change  one-page app style    99  of the time  we are developping websites so we can get those events from Frameworks like Angular  React  Vue etc    BUT  in my case of a Chrome extension  in Vanilla JS   I had to listen to an event that will trigger for each  page change   which can generally be caught by URL changed  but sometimes it doesn t   My homemade solution was the following     listen window history length   var oldLength   -1  function listen currentLength      if  currentLength    oldLength           Do your stuff here        oldLength   window history length    setTimeout function          listen window history length        1000       So basically the leoneckert solution  applied to window history  which will change when a page changes in a single page app    Not rocket science  but cleanest solution I found  considering we are only checking an integer equality here  and not bigger objects or the whole DOM

User · Answer

Add a hash change event listener   window addEventListener  hashchange   function e  console log  hash changed        Or  to listen to all URL changes   window addEventListener  popstate   function e  console log  url changed        This is better than something like the code below because only one thing can exist in window onhashchange and you ll possibly be overwriting someone else s code      Bad code example  window onhashchange   function              Code that overwrites whatever was previously in window onhashchange

User · Answer

You are starting a new setInterval at each call  without cancelling the previous one - probably you only meant to have a setTimeout

User · Answer

window addEventListener  beforeunload   function  e           do something    false

User · Answer

Although an old question  the Location-bar project is very useful   var LocationBar   require  location-bar    var locationBar   new LocationBar        listen to all changes to the location bar locationBar onChange function  path      console log  the current url is   path           listen to a specific change to location bar    e g  Backbone builds on top of this method to implement    it s simple parametrized Backbone Router locationBar route  some -regex   function           only called when the current url matches the regex      locationBar start     pushState  true         update the address bar and add a new entry in browsers history locationBar update   some url param 123        update the address bar but don t add the entry in history locationBar update   some url    replace  true        update the address bar and call the  change  callback locationBar update   some url    trigger  true

User · Answer

I created this  just add the function as an argument and whenever the link has any changes it will run the function returning the old and new url I created this  just add the function as an argument and whenever the link has any changes it will run the function returning the old and new url    on-url-change js v1  manual verification  let onUrlChangeCallbacks       let onUrlChangeTimestamp   new Date     1  function onUrlChange callback       onUrlChangeCallbacks push callback      onUrlChangeAutorun    function onUrlChangeAutorun        let oldURL   window location href      setInterval function            let newURL   window location href          if oldURL     newURL               let event                     oldURL  oldURL                  newURL  newURL                  type   urlchange                   timestamp  new Date     1 - onUrlChangeTimestamp                            oldURL   newURL              for let i   0  i  lt  onUrlChangeCallbacks length  i                     onUrlChangeCallbacks i  event                                    25

User · Answer

To listen to url changes  see below   window onpopstate   function event      console log  location      document location      state      JSON stringify event state         Use this style if you intend to stop remove listener after some certain condition   window addEventListener  popstate   function e       console log  url changed

User · Answer

In modern browsers  IE8   FF3 6   Chrome   you can just listen to the hashchange event on window   In some old browsers  you need a timer that continually checks location hash  If you re using jQuery  there is a plugin that does exactly that

[javascript] How to detect if URL has changed after hash in JavaScript

Examples related to javascript

Examples related to ajax