Chrome does all JS again on the back button

Question

I am developing a web application. And I wrote some JS script to execute on the finished document. But in chrome, when we press the back button and return to the previous page, it again executes all js script. But when I use the same in firefox, it does not execute JS.

I have an accordion on the page and when the user opens any accordion and follows one of the links under the accordion, and after that, if I press the back button on the accordion page again, chrome closes all accordions, as I wrote a script to close all of these documents ready. But firefox does not close.

Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}

Answer 1

You can use the pagehow event to ensure that you always find navigation on a specific page, regardless of whether the user clicks the back / forward button or selects a link and no matter which browser is used.

Then you can perform checks on the state of the user interface and perform the required logic (i.e., change the interface, prevent the execution of additional JS).

window.addEventListener('pageshow', function(event) { // check state of UI, etc. });

Answer 2

The solution that occurred to me was to use sessionStorage to find out if it was loaded the first time or not. Or even better, you can save the state of your accordions in the session repository so that it is always what the user wants.

Answer 3

In my case, the iframe was a hidden iframe (width and height of zero).

This iframe is just a workaround from an inherited system developed 12 years ago. But still used currently for the current application.

To solve this problem, I simply redirected the page loaded in the iframe to a blank page.

Example:

page_loaded_into_iframe.php

 <?php //do the php stuffs ?> <script> alert("hello world"); location.href = "about:blank"; // here, where the the magic happens! </script> 

After clicking the "Back" button, the browser will reload the blank page.

Remember that this may not apply if your case is not like mine.

Answer 4

In the Chrome Extension you can use the function:

  chrome.webNavigation.onCommitted.addListener (function callback)

and in the callback function you can take a look at the arguments:

transitionType + transitionQualifiers

to find:

"forward_back" The user used the "Forward" or "Back" button to start navigation.

For deatils see chrome.webNavigation

Of course, this event can be passed to the contents of a script with a regular message model (see Message Passing