Execute Scripts on Browser Back/Forward Navigation

Handling Back and Forward Navigation Events in the Browser with JS

Many developers run into issues when handling navigation, especially when users click the back button. A common problem is that scripts meant to update UI elements or re-trigger logic do not execute when returning to a previous page.

This happens because modern browsers cache previous pages, restoring them from memory instead of fully reloading them. As a result, event listeners or JavaScript logic inside window.onload might not execute as expected.

Example of the Issue:

You might have a script that updates a part of your page when it's loaded:

window.onload = function () {
  console.log("Page loaded!");
  document.getElementById("message").innerText = "Page refreshed!";
};

While this works on an initial load, if a user navigates away and then returns using the back button, the script may not run again because the page is restored from the cache instead of fully reloading.

The Fix: Using the Correct Event for Back Navigation

The window.onload event is triggered only when a page is fully loaded, including all assets. However, it does not trigger when navigating back to a cached page.

Instead of onload, we should use the pageshow event. The pageshow event fires both when a page is loaded normally and when it's loaded from the cache (such as when using the back button). This makes it the best option for ensuring scripts execute correctly.

window.addEventListener("pageshow", function () {
  console.log("Page is shown again!");
  document.getElementById("message").innerText = "Welcome back!";
});

This ensures that your scripts run correctly, even when the page is restored from the cache, providing a better user experience.

My Issue: The loader was still visible when returning to the previous page

Recently, I faced an issue where a loader would not disappear after a page redirect. I wanted to show a loader while processing some data and redirecting users to a new page. However, when users navigated back using the browser's back button, the loader was still visible, creating a frustrating experience.

The Problem I Encountered

Here’s the initial approach I used:

window.location.href = "/about-us";
setTimeout(function() {
  Loader.classList.add("d-none");
}, 2000);

I used setTimeout to hide the loader after a short delay, assuming that by the time the new page loaded, the loader would disappear. However, if a user quickly navigated back, the loader was still visible.

The Fix: Using the Right Event to Hide the Loader

After some research and testing, I found that the issue was related to how browsers cache pages when using the back button. The page wasn’t being fully reloaded, so the loader remained visible.

I then discovered the pageshow event, which fires when a page is loaded normally or restored from the cache. This was exactly what I needed!

window.addEventListener("pageshow", function () {
  if (Loader) {
    Loader.classList.add("d-none");
  }
});

If you're facing a similar issue where UI elements remain visible after a redirect, avoid using onload and switch to pageshow.

Thank You!