browsers back button location issue

Question

I have the following script for a smooth fadeIn, fadeOut when I'm linking to subpages.

$("body").css("display", "none");
$("body").fadeIn(500);

$('a').click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(500, redirectPage);       
});

function redirectPage() {
    window.location = linkLocation;
}

which works fine. The weird thing about this is, that the browsers back button has an issue. Lets say I'm on my index.html and click on a link which links to about.html, and try to get back to index.html by the back button all it shows is a blank page. It needs to refresh manually.

To make my issue clearer you can find an example HERE

NOTE: I experience this issue under Firefox and Safari. Chrome seems to be fine.

possible duplicate of [Cross-browser onload event and the Back button](http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button) — jcaron, Jul 05 '14 at 10:46

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

This is due to the special "back/forward" cache of browsers, which stores the full state of the page.

You might want to add the fadeIn on the pageshow event.

See this answer for details:

https://stackoverflow.com/a/2218733/3527940

edited May 23 '17 at 10:32

Community

1
1

answered Jul 05 '14 at 10:47

jcaron

17,302
6
32
46

no need to say, still waiting until I can accept ;) – supersize Jul 05 '14 at 10:55

browsers back button location issue

1 Answers1