7

I'm working with jQuery to have a fade-in effect on my html page, which works just fine. However, when I hit the back-button in my browser, I go to the right url but get a blank page. Is this a browser-caching thing? I'm relatively new to jQuery and I'm not really sure how to solve this. This is the site: http://www.e-preview.be/huyzewaterloos/nl/index.html

The code I'm using is this:

//page transition
    $("body").css("display", "none");
    $("body").fadeIn(1500);
  $("a.transition").click(function(event){
   event.preventDefault();
   linkLocation = this.href;
   $("body").fadeOut(500, redirectPage);
  });

 function redirectPage() {
  window.location = linkLocation;
 }
James Sumners
  • 14,485
  • 10
  • 59
  • 77
Rembrand
  • 73
  • 1
  • 1
  • 3

4 Answers4

8

It's because you page is in "bfcache" (see a Firefox article). For disable bfcache, you can just add an onunload attribut:

<body onunload="">

Source : Ajax, back button and DOM updates and Is there a cross-browser onload event when clicking the back button?

Community
  • 1
  • 1
remi.gaubert
  • 423
  • 3
  • 14
1

Newer browsers are better about keeping the previous pages ready to display when you use the back and forward buttons. So what is likely happening is that your browser is merely re-displaying the page after the $("body").fadeOut(500, redirectPage); had finished executing. That is, the page being shown after you click the back button has the style body { display: none; } applied.

I had no problems navigating your page with Chrome "6.0.472.51 beta" using the back and forward buttons. When I used Firefox 3.5 I saw the described issue when using the back button to go back to the index page. Using Firebug, I was able to confirm that the body element's style was set to display: none.

So what you are seeing is FireFox's bfcache keeping the page in the previous state, JavaScript and all. If you want Firefox to re-fire your fade in code you can attach it to Firefox's pageshow event. Similarly, WebKit has its own page caching mechanism (which would affect Safari and Chrome).

It should also be noted that the jQuery .ready() function is not the same thing as the window.load() function. See the documentation for further details. The source code for the .ready() function is also quite helpful.

To summarize: The code executed by $.ready() is executed before the page is actually rendered. In newer browsers, when you navigate away from a page it is very likely that the browser will save that page's state exactly as it is when you leave it. Thus, when you use the browser's back button to return to the page, the page will not be re-rendered. That is the DOM will not be rebuilt and the $.ready() function will not be re-fired. If you have code that need to be run every time the page is shown then attach the code to the pageshow() method (if it exists).

James Sumners
  • 14,485
  • 10
  • 59
  • 77
  • that's not it, because the body onload function should still execute, and so should the js scripts – Nealv Sep 02 '10 at 15:25
  • That depends on the browser. Clearly, Chrome 6 is re-executing the body onload event. But FireFox 3.5 is not. http://www.thomasfrank.se/when_onload_fails.html – James Sumners Sep 02 '10 at 15:35
  • Jeez, I didn't even know there was a browser difference when it came to firing jQuery. Good to know, thanks. – Rembrand Sep 04 '10 at 07:38
0

In the function above, the linkLocation variable is no longer available because it is out of scope.

Try this instead:

$("body").css("display", "none");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(500, function() {
        window.location = linkLocation;
    });
});

Edit: So I fixed your code, but that wasn't the question. :)

Apparently, the jQuery(document).ready() isn't fired when you hit the back button. You can try this near the top of the page.

history.navigationMode = 'compatible';

Source: Is there a cross-browser onload event when clicking the back button?

Community
  • 1
  • 1
Sandro
  • 4,761
  • 1
  • 34
  • 41
  • So it is relating to browserhistory/caching. I'll try it when I get back to work on Monday. Thanks! – Rembrand Sep 04 '10 at 07:39
  • Tried with the modified code but Firefox 3.5 isn't doing it. Oh well, if it's just in that one, I can live with it for now. Thanks anyway, will look into it some more. – Rembrand Sep 06 '10 at 07:32
  • Hi, looks like the comment above the one from before might be better. http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/201406#201406 – Sandro Sep 07 '10 at 14:41
  • You would add onunload="" to your body tag and the browser will not cache the page. – Sandro Sep 07 '10 at 14:42
0

Normally the pages are cached when you hit the back button, your $(document).ready() function will not fire.

Try setting no-cache for the page.

Matthew Rygiel
  • 1,247
  • 2
  • 15
  • 17