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

Question

For all major browsers  except IE   the JavaScript onload event doesn   t fire when the page loads as a result of a back button operation     it only fires when the page is first loaded   Can someone point me at some sample cross-browser code  Firefox  Opera  Safari  IE       that solves this problem  I   m familiar with Firefox   s pageshow event but unfortunately neither Opera nor Safari implement this

User · Answer

I ran into a problem that my js was not executing when the user had clicked back or forward. I first set out to stop the browser from caching, but this didn't seem to be the problem. My javascript was set to execute after all of the libraries etc. were loaded. I checked these with the readyStateChange event.

After some testing I found out that the readyState of an element in a page where back has been clicked is not 'loaded' but 'complete'. Adding || element.readyState == 'complete' to my conditional statement solved my problems.

Just thought I'd share my findings, hopefully they will help someone else.

Edit for completeness

My code looked as follows:

script.onreadystatechange(function(){ 
   if(script.readyState == 'loaded' || script.readyState == 'complete') {
      // call code to execute here.
   } 
});

In the code sample above the script variable was a newly created script element which had been added to the DOM.

User · Answer

I tried the solution from Bill using   document  ready     but at first it did not work  I discovered that if the script is placed after the html section  it will not work  If it is the head section it will work but only in IE  The script does not work in Firefox

User · Answer

OK  here is a final solution based on ckramer s initial solution and palehorse s example that works in all of the browsers  including Opera   If you set history navigationMode to  compatible  then jQuery s ready function will fire on Back button operations in Opera as well as the other major browsers   This page has more information   Example   history navigationMode    compatible     document  ready function      alert  test          I tested this in Opera 9 5  IE7  FF3 and Safari and it works in all of them

User · Answer

I couldn t get the above examples to work  I simply wanted to trigger a refresh of certain modified div areas when coming back to the page via the back button  The trick I used was to set a hidden input field  called a  dirty bit   to 1 as soon as the div areas changed from the original  The hidden input field actually retains its value when I click back  so onload I can check for this bit  If it s set  I refresh the page  or just refresh the divs   On the original load  however  the bit is not set  so I don t waste time loading the page twice    lt input type  hidden  id  dirty  gt    lt script gt    document  ready function       if      dirty   val                 reload the page or specific divs only          when something modifies a div that needs to be refreshed  set dirty 1       dirty   val  1         lt  script gt    And it would trigger properly whenever I clicked the back button

User · Answer

OK  here is a final solution based on ckramer s initial solution and palehorse s example that works in all of the browsers  including Opera   If you set history navigationMode to  compatible  then jQuery s ready function will fire on Back button operations in Opera as well as the other major browsers   This page has more information   Example   history navigationMode    compatible     document  ready function      alert  test          I tested this in Opera 9 5  IE7  FF3 and Safari and it works in all of them

User · Answer

for the people who don t want to use the whole jquery library i extracted the implementation in separate code  It s only 0 4 KB big   You can find the code  together with a german tutorial in this wiki  http   www easy-coding de wiki html-ajax-und-co onload-event-cross-browser-kompatibler-domcontentloaded html

User · Answer

Unload event is not working fine on IE 9  I tried it with load event  onload     it is working fine on IE 9 and FF5   Example    lt    page language  java  contentType  text html  charset ISO-8859-1      pageEncoding  ISO-8859-1   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt title gt Insert title here lt  title gt   lt script type  text javascript  src  jquery js  gt  lt  script gt   lt script type  text javascript  gt      jQuery window  bind  load   function                 name customerName    val               lt  script gt   lt  head gt   lt body gt       lt h1 gt body jsp lt  h1 gt       lt form action  success jsp  gt           lt div id  myDiv  gt           Your Full Name   lt input name  yourName  id  fullName              value  Your Full Name    gt  lt br gt   lt br gt   lt input type  submit  gt  lt br gt            lt  div gt        lt  form gt   lt  body gt   lt  html gt

User · Answer

I can confirm ckramer that jQuery s ready event works in IE and FireFox   Here s a sample    lt html gt   lt head gt       lt title gt Test Page lt  title gt       lt script src  http   code jquery com jquery-latest js  type  text javascript  gt  lt  script gt       lt script type  text javascript  gt                document  ready function                     var d   new Date                       test   html   Hi at     d toString                           lt  script gt   lt  head gt   lt body gt       lt div id  test  gt  lt  div gt       lt div gt           lt a href  http   www google com  gt Go  lt  a gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Some modern browsers  Firefox  Safari  and Opera  but not Chrome  support the special  back forward  cache  I ll call it bfcache  which is a term invented by Mozilla   involved when the user navigates Back  Unlike the regular  HTTP  cache  it captures the complete state of the page  including the state of JS  DOM   This allows it to re-load the page quicker and exactly as the user left it   The load event is not supposed to fire when the page is loaded from this bfcache  For example  if you created your UI in the  load  handler  and the  load  event was fired once on the initial load  and the second time when the page was re-loaded from the bfcache  the page would end up with duplicate UI elements   This is also why adding the  unload  handler stops the page from being stored in the bfcache  thus making it slower to navigate back to  -- the unload handler could perform clean-up tasks  which could leave the page in unworkable state   For pages that need to know when they re being navigated away back to  Firefox 1 5  and the version of Safari with the fix for bug 28758 support special events called  pageshow  and  pagehide    References    Webkit  http   webkit org blog 516 webkit-page-cache-ii-the-unload-event  Firefox  https   developer mozilla org En Using Firefox 1 5 caching  Chrome  https   code google com p chromium issues detail id 2879

User · Answer

I have used an html template  In this template s custom js file  there was a function like this       jQuery document  ready function                window  on  load   function                                           But this function was not working when I go to back after go to other page   So  I tried this and it has worked       jQuery document  ready function                                 Window Load Start    window addEventListener  load   function            jQuery document  ready function                                          Now  I have 2  ready  function but it doesn t give any error and the page is working very well   Nevertheless  I have to declare that it has tested on Windows 10 - Opera v53 and Edge v42 but no other browsers  Keep in mind this     Note  jquery version was 3 3 1 and migrate version was 3 0 0

User · Answer

Bill  I dare answer your question  however I am not 100  sure with my guesses  I think other then IE browsers when taking user to a page in history will not only load the page and its resources from cache but they will also restore the entire DOM  read session  state for it  IE doesn t do DOM restoration  or at lease did not do  and thus the onload event looks to be necessary for proper page re-initialization there

User · Answer

I thought this would be for  onunload   not page load  since aren t we talking about firing an event when hitting  Back     document ready   is for events desired on page load  no matter how you get to that page  i e  redirect  opening the browser to the URL directly  etc    not when clicking  Back   unless you re talking about what to fire on the previous page when it loads again   And I m not sure the page isn t getting cached as I ve found that Javascripts still are  even when  document ready   is included in them   We ve had to hit Ctrl F5 when editing our scripts that have this event whenever we revise them and we want test the results in our pages     window  unload function    alert  do unload stuff here           is what you d want for an onunload event when hitting  Back  and unloading the current page  and would also fire when a user closes the browser window   This sounded more like what was desired  even if I m outnumbered with the  document ready   responses   Basically the difference is between an event firing on the current page while it s closing or on the one that loads when clicking  Back  as it s loading   Tested in IE 7 fine  can t speak for the other browsers as they aren t allowed where we are   But this might be another option

User · Answer

Guys  I found that JQuery has only one effect  the page is reloaded when the back button is pressed  This has nothing to do with  ready    How does this work  Well  JQuery adds an onunload event listener      http   code jquery com jquery-latest js jQuery window  bind  unload   function              By default  it does nothing  But somehow this seems to trigger a reload in Safari  Opera and Mozilla -- no matter what the event handler contains    edit Nickolay   here s why it works that way  webkit org  developer mozilla org  Please read those articles  or my summary in a separate answer below  and consider whether you really need to do this and make your page load slower for your users    Can t believe it  Try this    lt body onunload    gt  lt  -- This does the trick -- gt   lt script type  text javascript  gt      alert  first load   reload        window onload   function   alert  onload      lt  script gt   lt a href  http   stackoverflow com  gt click me  then press the back button lt  a gt   lt  body gt    You will see similar results when using JQuery   You may want to compare to this one without onunload   lt body gt  lt  -- Will not reload on back button -- gt   lt script type  text javascript  gt      alert  first load   reload        window onload   function   alert  onload      lt  script gt   lt a href  http   stackoverflow com  gt click me  then press the back button lt  a gt   lt  body gt

User · Answer

jQuery s ready event was created for just this sort of issue   You may want to dig into the implementation to see what is going on under the covers

User · Answer

If I remember rightly  then adding an unload   event means that page cannot be cached  in forward backward cache  - because it s state changes may change when user navigates away  So - it is not safe to restore the last-second state of the page when returning to it by navigating through history object

User · Answer

Guys  I found that JQuery has only one effect  the page is reloaded when the back button is pressed  This has nothing to do with  ready    How does this work  Well  JQuery adds an onunload event listener      http   code jquery com jquery-latest js jQuery window  bind  unload   function              By default  it does nothing  But somehow this seems to trigger a reload in Safari  Opera and Mozilla -- no matter what the event handler contains    edit Nickolay   here s why it works that way  webkit org  developer mozilla org  Please read those articles  or my summary in a separate answer below  and consider whether you really need to do this and make your page load slower for your users    Can t believe it  Try this    lt body onunload    gt  lt  -- This does the trick -- gt   lt script type  text javascript  gt      alert  first load   reload        window onload   function   alert  onload      lt  script gt   lt a href  http   stackoverflow com  gt click me  then press the back button lt  a gt   lt  body gt    You will see similar results when using JQuery   You may want to compare to this one without onunload   lt body gt  lt  -- Will not reload on back button -- gt   lt script type  text javascript  gt      alert  first load   reload        window onload   function   alert  onload      lt  script gt   lt a href  http   stackoverflow com  gt click me  then press the back button lt  a gt   lt  body gt

User · Answer

OK  I tried this and it works in Firefox 3  Safari 3 1 1  and IE7 but not in Opera 9 52  If you use the example shown below  based on palehorse s example   you get an alert box pop-up when the page first loads   But if you then go to another URL  and then hit the Back button to go back to this page  you don t get an alert box pop-up in Opera  but you do in the other browsers    Anyway  I think this is close enough for now   Thanks everyone    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt   lt title gt Untitled Document lt  title gt   lt meta http-equiv  expires  content  0  gt   lt script src  jquery js  type  text javascript  gt  lt  script gt   lt script type  text javascript  gt    document  ready                       function                          alert  test                                               lt  script gt   lt  head gt   lt body gt   lt h1 gt Test of the page load event and the Back button using jQuery lt  h1 gt   lt  body gt   lt  html gt

[javascript] Is there a cross-browser onload event when clicking the back button?

Examples related to javascript

Examples related to pageload