Browser Back/Forward Button

What happens when clicking on the “Back” or “Forward” button of a browser?

Results depends on the browser you are using and are related to “back/forward cache”.

A back/forward cache (BFCache) caches whole pages (including the JavaScript heap) when navigating away from a page, so that the full state of the page can be restored when the user navigates back: by clicking on the back/forward button of the browser, or, on some websites, by clicking on a JavaScript-driven back button (this button uses back() method to create the same feature as clicking the “Back Button” in a browser).

Currently only Safari and Firefox support “back/forward cache”. You may like to read the following articles for more details:

LoftLoader has not changed the default function of a browser, so when clicking on the “Back” or “Forward” button of a browser, the preloader works as it should be:

In browsers that support “back/forward cache”, when clicking on the back/forwad button, the previous/next page will not be reloaded, and the preloader will not appear.

When a browser does not support the “back/forward cache”, the browser will reload the page when the user navigates back/forward, the preloader on the previous/next page will be displayed again because the previous/next page is reloaded.

How about the “Smooth Page Transition” feature?

As we have mentioned in the chapter of “Smooth Page Transition”, this feature will only be triggered when clicking on an internal < a > link on a web page. Clicking on the “Back” or “Forward” button of the browser will not trigger this feature.

  • There is no good (safe, clean and suitable for all browsers) solution to detect whether or not the user has pressed the back/forward button in the browser.
  • It is generally a bad idea overriding the default behavior of web browser. Client side script does not have the sufficient privilege to do this for security reason.