Update 2024:

With the latest advancements, major browsers now support the Navigation API, enabling us to utilize it in the following manner:

window.navigation.addEventListener("navigate", (event) => {
    console.log('location changed!');
})

If you want to learn more about the Navigation API, check out the API Reference: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API

---

Prior Approach (without the Navigation API):

The objective was to include locationchange event listeners. Following the modification below, this can be achieved by adopting the indicated method:

window.addEventListener('locationchange', function () {
    console.log('location changed!');
});

Comparatively,

window.addEventListener('hashchange',() => {})

would only trigger when the section after a hashtag in a URL is altered, and

window.addEventListener('popstate',() => {})

doesn't consistently function as intended.

This particular alteration, reminiscent of Christian's response, edits the history object to introduce additional functionality.

Initially, before these revisions, solely a popstate event existed, whereas no events for pushstate and replacestate were present.

These adjustments ensure that all three functions emit a customized locationchange event for your usage, as well as pushstate and replacestate events if required.

The modifications implemented are as follows:

(() => {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event('pushstate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event('replacestate'));
        window.dispatchEvent(new Event('locationchange'));
        return ret;
    };

    window.addEventListener('popstate', () => {
        window.dispatchEvent(new Event('locationchange'));
    });
})();

---

It is important to note that we are constructing a closure in order to retain the original function within the new one, ensuring its execution whenever the new function is called.

function activateHashChange() {
     window.onhashchange = function() { 
         //custom code  
    }

    window.onpopstate = function() { 
        //custom code  
    }
}

function activateEventListeners() {
     window.addEventListener('hashchange', function() { 
         //custom code
    });

    window.addEventListener('popstate', function() { 
          //custom code
    });
}

function activateWithJQuery() {
     $(window).bind('hashchange', function() {
          //custom jQuery code
    });

    $(window).bind('popstate', function() {
           //custom jQuery code
    });
}

or

To handle hash changes and pop state events using vanilla JavaScript or with jQuery library.

Update after conducting some research:

It appears that I may have been misled by the information provided on Mozilla's documentation. The popstate event (along with its callback function onpopstate) does not get triggered when either pushState() or replaceState() are called in the code, as mentioned in this Stack Overflow post. Therefore, the original solution may not be applicable in all scenarios.

Nevertheless, there is a workaround suggested by @alpha123 where you can make changes using a technique known as monkey-patching the functions:

var pushState = history.pushState;
history.pushState = function () {
    pushState.apply(history, arguments);
    fireEvents('pushState', arguments);  // Implement an event-handling function here
};

Initial response

Considering the query titled "How to detect URL change", if you wish to monitor full path modifications (not just the hash anchor), you can listen for the popstate event:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

Here is a link to further information on popstate in Mozilla Docs.

As of January 2017, approximately 92% of browsers worldwide support popstate.

Utilizing jQuery along with a plug-in opens up various possibilities:

$(window).bind('hashchange', function() {
 /* perform actions here */
});

Visit this link for more information on the jQuery hashchange plug-in.

If not using jQuery, one would need to resort to setInterval and monitor changes in the hash event (window.location.hash)

New Update! Here is a simple example code snippet:

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();

Implement a listener for hash changes!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

To monitor all URL modifications:

window.addEventListener('popstate', function(e){console.log('url changed')});

This approach is preferred over the following code snippet because it prevents potential conflicts with other scripts when using window.onhashchange.

// Example of problematic code

window.onhashchange = function() { 
     // This will overwrite any existing code in window.onhashchange  
}

for Firefox 98+ (2022-05-24)

navigation.addEventListener("navigate", event => {
  console.log(`navigating to ->`,event.destination.url)
});

Check out the documentation at WICG/navigation-api

After trying out various options, I found success with this approach:

function monitorURLChanges(){
    if(window.location.href != currentURL){
        alert("The URL has changed!");
        currentURL = window.location.href;
    }
}

var currentURL = window.location.href;
setInterval(monitorURLChanges, 1000);

If the window events are not functioning as expected, consider using a MutationObserver that monitors changes in the root element without recursion.

// keep track of page location at load
let currentLocation = document.location.href;

const observer = new MutationObserver((mutationList) => {
  if (currentLocation !== document.location.href) {
    // location has changed!
    currentLocation = document.location.href;

    // (add your event logic here)
  }
});

observer.observe(
  document.getElementById('root'),
  {
    childList: true,

    // improves performance
    subtree: false
  });

While not always possible, usually when the URL changes, the content of the root element also changes.

Though not confirmed through profiling, theoretically this approach might have less overhead than using a timer. The Observer pattern typically only loops through subscriptions when a change occurs, whereas a timer would need to check frequently to ensure immediate triggering after a URL change.

Additionally, using a MutationObserver is likely more reliable than a timer as it avoids timing issues.

After testing various methods for redirecting links to a different page on the same domain, I found that none of them worked as expected. Therefore, I decided to create my own solution:

let pathname = location.pathname;
window.addEventListener("click", function() {
    if (location.pathname != pathname) {
        pathname = location.pathname;
        // custom code here
    }
});

In addition, you can also monitor the popstate event to detect when a user navigates back a page.

window.addEventListener("popstate", function() {
    // additional code here
});

---

Update

The Navigation API is an experimental feature that may not be supported by all browsers. For more information on browser compatibility, refer to this link.

window.navigation.addEventListener('navigate', function() {
    // updated code here
});

Despite being an aged inquiry, the functionality of the Location-bar project is incredibly valuable.

const LocationBarModule = require("location-bar");
const locationBarInstance = new LocationBarModule();

// Monitor all changes made to the location bar
locationBarInstance.onChange(function (path) {
  console.log("the current URL is", path);
});

// Listen for a specific change in the location bar
// For example, Backbone uses this method to implement its parametrized Router
locationBarInstance.route(/some\-regex/, function () {
  // This function will only be called when the current URL matches the regex
});

locationBarInstance.start({
  pushState: true
});

// Update the address bar and create a new entry in the browser's history
locationBarInstance.update("/some/url?param=123");

// Update the address bar without adding the entry to the history
locationBarInstance.update("/some/url", {replace: true});

// Update the address bar and trigger the `change` callback
locationBarInstance.update("/some/url", {trigger: true});

For monitoring changes in URL, refer to the following code:

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

If you need to stop or remove the listener under certain conditions, use this approach:

window.addEventListener('popstate', function(e) {
   console.log('url changed')
});

Referencing the code snippet provided in this source, below is an implementation with old JavaScript syntax (no arrow function, compatible with IE 10+):

(function() {
  if (typeof window.CustomEvent === "function") return false; // For non-IE browsers
  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"));
  });
})();

During the creation of a chrome extension, I encountered a common issue along with an additional challenge: At times, the page would change but the URL remained the same.

For example, if you navigate to the Facebook Homepage and click on the 'Home' button, the page will reload but the URL will stay unchanged (similar to a one-page app).

In most cases, when developing websites we rely on frameworks such as Angular, React, Vue, etc. to detect these events.

However, in the case of my Chrome extension (using Vanilla JS), I needed to listen for an event that would trigger during each "page change", which is usually indicated by a URL change but not always.

The solution I came up with was as follows:

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Your code here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

Essentially, this solution mirrors leoneckert's approach, but focuses on window history, which updates when a page changes in a single-page app.

It may not be overly complex, but it was the most efficient solution I could find, considering we're only comparing integer values here rather than larger objects or the entire DOM.

Discovered a solution in a separate discussion:

There isn't a single event that always works, and modifying the pushState event can be unreliable for most major SPAs.

Instead, smart polling has been the most effective approach for me. You have the flexibility to add various types of events, but the following ones have worked exceptionally well:

This snippet is tailored for TypeScript, but it can be easily adjusted:

const locationChangeEventType = "MY_APP-location-change";

// executed on initialization 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)
})

I have developed a custom event similar to the hashchange event

// onurlchange-event.js v1.0.1
(() => {
    const hasNativeEvent = Object.keys(window).includes('onurlchange')
    if (!hasNativeEvent) {
        let oldURL = location.href
        setInterval(() => {
            const newURL = location.href
            if (oldURL === newURL) {
                return
            }
            const urlChangeEvent = new CustomEvent('urlchange', {
                detail: {
                    oldURL,
                    newURL
                }
            })
            oldURL = newURL
            dispatchEvent(urlChangeEvent)
        }, 25)
        addEventListener('urlchange', event => {
            if (typeof(onurlchange) === 'function') {
                onurlchange(event)
            }
        })
    }
})()

Usage example:

window.onurlchange = event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
}

addEventListener('urlchange', event => {
    console.log(event)
    console.log(event.detail.oldURL)
    console.log(event.detail.newURL)
})

Have a great time!

let oldURL = '';
const observer = new MutationObserver(function(mutations) {
  if (window.location.href !== oldURL) {
      oldURL = window.location.href;
      console.log(`The URL has been updated to ${window.location.href}`);
    }
});

Below is the updated link

navigation.addEventListener('navigate', event) => {
console.log("the page has changed", event.destination.url)
})