22

I have a webpage that use $(document).ready() to build the interface. Then the user can go to a child page, and to go back to the original page he can press the browser's "previous" button or a "Return" button in the page which triggers a history.back();. Back on the original page, $(document).ready() is not triggered so the page is missing information.

Is there a way to trigger it automatically like if it was a "real load"?

edit

placing an alert in it, the alert is popped but stuff is missing in my interface like if some part of the ready event is missing. Investigating...

edit 2

hahahahaha in document.ready I click some checkbox which are supposed to be unchecked. When I "back" on this page, they are checked so they become unchecked because I reclick them.

Sorry, this is completely my bad :(

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sirber
  • 3,358
  • 5
  • 25
  • 32

4 Answers4

28

A quick solution to this problem, use "onpageshow" instead.

window.onpageshow = function(event) {
    //do something
};
stonyau
  • 2,132
  • 1
  • 20
  • 18
  • Thanks! None of the other proposed solutions worked properly on both Firefox and Chrome, but this one does. – Jorge Suárez de Lis May 05 '17 at 08:30
  • Thanks! I have noted, that $(document).ready() not is triggered with history.back(); on mobile browsers (safari and google chrome) under iOS , (whereby it works on desktop.browsers) and have searched a long time... with window.onpageshow it works on all browsers – FredyWenger Nov 22 '19 at 11:02
  • warning, pageshow does not fire on iframe elements on firefox 74, but "load" does =/ – hanshenrik Apr 06 '20 at 22:39
  • Warning, history back is sorcery! Let's join together and remove its funkyness forever, only thing it should really do is to re-fill previously-filled forms. That's all, otherwise it should load normally x) – jave.web Jul 24 '20 at 00:27
7

If the user uses the Back button to navigate and you require a full reload of the page, you can set the NO-CACHE policy of the page.

This way the browser is forced to reload the page from the server, even using the Back button.

Paulo Santos
  • 11,285
  • 4
  • 39
  • 65
4

1.) put scripts at the bottom of your page.
2.) execute plugins and whatnot in your last script tag(s).
3.) Do not use onDomReady implementations at all, it's redundant.

People are so accustomed to onload or ondomready, they overlook the fact that putting your scripts at the bottom of a page does virtually the same thing without the need to poll and see if your html is available.

Furthermore, it's also good practise as your scripts do not block html/css rendering either.

Not depending on onDomReady or onLoad implementations solves a lot of issues.

BGerrissen
  • 21,250
  • 3
  • 39
  • 40
  • 1
    -1, For a browser where `onload` doesn't work, your solution doesn't work as well. E.g. FireFox, it just doesn't run the script regardless of whether you put it in onload or at the bottom of the page. Did you even test? – Pacerier Oct 12 '14 at 07:31
1

Very interesting question. You might need to re-trigger the event/function when the page gets focus, or something similar. you might also need to keep a flag variable to track whether an 'event re-triggering' is in order.

Dutchie432
  • 28,798
  • 20
  • 92
  • 109