I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.

I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do 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....}

I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.

I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do 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....}

• javascript
• jquery
• html
• google-chrome

• Related, but the OP wanting the opposite behaviour, but may provide some insights. – James Thorpe Commented Jun 23, 2015 at 13:32

4 Answers 4

You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.

Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).

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

The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.

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

This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.

To solve it, i just redirected the page loaded into iframe to the 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>

Once pressed the "back button", the browser will reload a blank page.

Be aware that this might be not applicable if your case is not similar to mine.

In the Chrome Extension you can use the function:

chrome.webNavigation.onCommitted.addListener(function callback)

and in the callback function you may take a look to the arguments:

transitionType + transitionQualifiers

to look for:

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

For deatils see chrome.webNavigation

Of course, this event can be municated to the content script with the usual message model (refer to: Message Passing