4

I have a page where I show a throbber when I navigate away from the page. Like <a onclick="throbber.show()"> on every link. When I now navigate back in Firefox, the throbber is still shown.

Is there any javascript event that is fired to the arriving webpage when I click back? Or one that is fired just when the webpage is changed to the new one? Or can I make my throbber more intelligent?

Thanks for any input!

Thorben Croisé
  • 12,407
  • 8
  • 39
  • 50
  • I suppose, this is because of cache. Browser just display you completely cached page (with all of its js objects and states). This could be solved with setting sorresponding https headers on the server. – kirilloid Mar 16 '12 at 10:35

3 Answers3

1

put this in your html:

<form name="_browser"><input id="checker" value="1" type="hidden"></form>

and also this javascript:

function cacheCheck()
{
  var checker = document.getElementById("checker");
  if (checker.value == 2) return true;
  checker.value = 2;
  checker.defaultValue = 2;
  return false;
}

function cacheReload()
{
  if (cacheCheck()) location.reload(true);
}

and then call cacheReload when your page loads:

<body onload="cacheReload()">
dldnh
  • 8,923
  • 3
  • 40
  • 52
  • great idea! So, what you are basically saying is, that the onload event on body will be fired on the page that i navigate to, so I guess it's easier to just hide the throbber then – Thorben Croisé Mar 16 '12 at 17:12
  • this is more a general-purpose solution for making sure you're not dealing with stale content do to the use of the back button – dldnh Mar 17 '12 at 14:18
1

Dldnh's answer inpired me to do some tests. I suspected that the body.onload() event would be called when going back and forth. So I created a simple testpage and found out that this is true in Firefox 10, IE7, IE 8, IE 9 and Chrome 17. Also jQuery(document).ready() will be called.

The very simple solution for hidind the throbber would therefore be either using

<body onload="hideThrobber()">

or using jQuery ready

jQuery(document).ready(function () {
  hideThrobber();
};

to hide the throbber then. I implemented this and it seems to work fine on my page. Would be great if somebody with a similar problem could confirm this.

I also found this interesting Stackoverflow question. While it is a little outdated, the point that calling javascript on navigation back and forth slowing down the page is still true. But I would guess that todays JS-Engines are fast enough so this is not a real issue anymore.

Community
  • 1
  • 1
Thorben Croisé
  • 12,407
  • 8
  • 39
  • 50
0

If you can't turn off the throbber from the page you navigate to, there are a few things you can do. The trick is that the page will be left active, so you can start up some things before you leave, in the onclick. They aren't perfect though.

  1. Start a timer. The timer will be running when you return to the page, so the timeout routine will be called, and you can switch the throbber off there.
    Problem: if you set the timer interval too small, the timeout routine will be called before the user has actually left the page, and the throbber will stop. Or if you set the interval too large, it will take a while before the timeout routine kicks in after they have returned.

  2. Add an event listener to the body that responds to the mousemove event, so that as soon as the user moves the mouse, the routine that turnes off the throbber will be called.
    Problem: if the user clicks the browser's Back button, the mouse will be outside the window when the page is redisplayed, so the throbber will remain visible until the user moves the mouse into the window.

So, take your pick. Or do both. Just remember to clean up afterwards - stop the timer, remove the event listener.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150