3

The iOS Safari doesnt't seem to trigger pageshow event in the following situation.

Lets say I have 3 pages

  • Page A : (has some code code on pageshow event)
  • Page B
  • Page C

User navigates from A -> B. Presses the back button. (pageshow triggers fine)
User then navigates to another page could be Page B or Page C. Then presses the back button again. (pageshow doesn't trigger)

On the contrary if the user minimizes and maximizes the window again or switches to another window and back (by pressing the middle button on iPhone) the pageshow event is triggered again.

Everything seems to work fine on Android

window.onpageshow = function(e) {
  alert('hello');
}

Did anyone else face it? I spent hours on this thing and couldn't think of a workaround.

Any help would be greatly appreciated.

Atif
  • 10,623
  • 20
  • 63
  • 96
  • Maybe this http://stackoverflow.com/questions/11979156/mobile-safari-back-button answer will helpful for you – Oleksandr T. Feb 27 '15 at 09:13
  • http://stackoverflow.com/questions/20899274/how-to-refresh-page-on-back-button-click – i_a Oct 31 '15 at 09:32
  • 1
    Did you fix this? I'm facing the same issue on iOS 9.3 – Anon Dev May 03 '16 at 14:17
  • @JorgeRamírez: yes, long ago. I don't remember on top of my head but there are 2 different events one that works fine in Android and one that works properly in iOS. One is `pageshow` and I don't remember the other one. So based on UserAgent I add my event handle to that event. Try `pageinit`, `pagebeforeshow`, `pageshow` etc. – Atif May 03 '16 at 17:21
  • Thanks for your response but unfortunately I already tried all those events without any luck – Anon Dev May 03 '16 at 17:34
  • @JorgeRamírez Found it! Try this `var myCustomEvent = (navigator.userAgent.match('iPhone') != null) ? 'popstate' : 'pageshow'; $(window).on(myCustomEvent, function(e) {` – Atif May 03 '16 at 18:38
  • I had exactly the same problem, but I narrowed it down quite a bit: the "pageshow" event fires only once in Safari 12 on OSX (didn't try iOS yet) IF you load the Facebook like button !! Doesn't matter if you load it via their JS SDK or iFrame solution, as soon as it appears on your page, the first time you hit the back button, a pageshow event triggers as expected. Now go "Forward", then "backward" in your browser, no event get fired at all !! Grrr FB Without FB like button, you can go fwd/back as many times as you want, "pageshow" event every time ! – Bob Nov 16 '19 at 14:02

3 Answers3

2

Hack : This is what worked for me

var myCustomEvent = (navigator.userAgent.match('iPhone') != null) ? 'popstate' : 'pageshow';

$(window).on(myCustomEvent, function(e) {
 ...
}

For some reason popstate triggers everytime when page state changes in iOS but not in Android.

Atif
  • 10,623
  • 20
  • 63
  • 96
  • After a while testing a lot of solutions, this code finally seems to be the definitive solution, in my case is working on Safari 9.1 (iOS 9.3). Advice for people facing this: Be sure to clear your browser's cache on client and restart the site on the server. – Anon Dev May 03 '16 at 20:28
  • Works like a charm on iOS 10! – sahilkhosla Oct 07 '16 at 00:49
0

Try using:

window.onpageshow = function(event) {
if (!event.persisted) {
    alert("hello");
}
};

Persisted is false on initial page load, so you can check against it, and if it false, it is your first page load.

Michael Voznesensky
  • 1,612
  • 12
  • 15
0

The popstate event doesn't seem to work any more, at least for me. I worked out some third-party script on my page was breaking this, but wasn't able to work out which one. I came up with this hack:

addEventListener('pageshow', () => {
  history.replaceState({}, document.title, window.location.pathname);
  // called on initial load and first back
});

addEventListener('popstate', () => {
  // called on all back events
});
wilsonpage
  • 17,341
  • 23
  • 103
  • 147