A way to monkey-patch the HTML5 JavaScript History API

monkey-patching-example.js

/* @HINT: If statement for feature detection */
/* @CHECK: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection */
if (typeof window.History === 'function') {
  /* @HINT: Copy out the native browser `pushState` function for later use */
  const __pushState = window.History.prototype.pushState;

  /* @HINT: Also, monkey-patch pushState (which is used by React / Vue / jQuery / Vanilla for their routing) */
  window.History.prototype.pushState = function (...args) {
    const [, , url] = args
    const origin = window.location.origin
    /* @HINT: The URL of the last loaded page */
    const newURL = ((url.indexOf('http') === 0 ? url : origin + url) || '').toString()
    /* @HINT: The URL of the currently loaded page */
    const oldURL = document.URL;
    /* @HINT: Ensuring that it wasn't a reload but a page transistion to a different page */
    const isProperNav = oldURL !== newURL

    if (isProperNav) {
      /* @HINT: Dispatch a custom event named `beforeurlchange` (Reads as: before URL change) */
      document.dispatchEvent(
        new Event( 'beforeurlchange' )
      )
    }

    /* @HINT: Call the native browser `pushState` function so everything works as per usual */
    return __pushState.apply(this, args);
  }
}