How to run a function on load, back, and forward

Question

I've looked at a few other dated questions on this site and have found their solutions don't seem to work on modern browsers anymore.

var foo = function() {
  console.log('woohoo');
};
foo();

I want this to run everytime. I obviously have no problem running it on the first initial load but I am using url hashes to hide and show certain divs of content. When a user clicks forward and backward I would like this function to run again as well.

try this $(window).on('beforeunload', function () { foo(); }); — Sushil, Jul 15 '15 at 21:59
@ChadHedgcockthe browsers itself. Specifically chrome right now. — anthony-dandrea, Jul 15 '15 at 22:00
@Sushil unfortunately that doesn't work. I have seen that solution in other posts but they were older. — anthony-dandrea, Jul 15 '15 at 22:01
You'll need to show some of your code that handles the forward/backward and the show/hide functionality. You could invoke `foo` from within those event handlers pretty easily, I assume. — Matthew Blancarte, Jul 15 '15 at 22:03

score 3 · Accepted Answer · edited May 23 '17 at 12:29

Browsers cache the page so that they load faster on back/forward. For this reason the load events are never fired and that would also be why your code isn't run again. The browser is just restoring a previous state.

See this answer for more details on this.

Since you are just dealing with hashes you could try binding to the onhashchange event and calling your method then.

window.addEventListener("hashchange", foo);

If you're using a single page framework such as Angular, Backbone or one of the many others they usually provide you with a way to handle this as well so check the documentation if that's the case.

TIL about the hashChange event listener. This worked like a charm. Thank you very much. — anthony-dandrea, Jul 15 '15 at 22:17

How to run a function on load, back, and forward

1 Answers1