After calling history.pushState in Safari on iOS, it's no longer possible to use alert(), confirm() or prompt(), when using the browser back button to change back.
Is this an iOS bug? Are there any known workarounds?
Simple example to reproduce this behavior:
<html>
<body>
<ul>
<li>Step 1: <button onclick="alert(Math.random())">Confirm Alert is working</button></li>
<li>Step 2: <button onclick="history.pushState(null, null, '/debug/'+Math.random());">Change History</button></li>
<li>Step 3: use your browser back button, to go back</li>
<li>Step 4: <button onclick="alert(Math.random())">Alert is not working anymore</button></li>
</ul>
</body>
</html>
You can try it online here: goo.gl/faFW6o.
After calling history.pushState in Safari on iOS, it's no longer possible to use alert(), confirm() or prompt(), when using the browser back button to change back.
Is this an iOS bug? Are there any known workarounds?
Simple example to reproduce this behavior:
<html>
<body>
<ul>
<li>Step 1: <button onclick="alert(Math.random())">Confirm Alert is working</button></li>
<li>Step 2: <button onclick="history.pushState(null, null, '/debug/'+Math.random());">Change History</button></li>
<li>Step 3: use your browser back button, to go back</li>
<li>Step 4: <button onclick="alert(Math.random())">Alert is not working anymore</button></li>
</ul>
</body>
</html>
You can try it online here: goo.gl/faFW6o.
Share Improve this question edited Sep 14, 2019 at 8:05 Nick Friskel 2,4372 gold badges22 silver badges33 bronze badges asked Jun 28, 2016 at 18:29 dandan 5,41713 gold badges41 silver badges44 bronze badges 16- 1 @JacobHeater unfortunately its not when running standalone (without an iframe) – dan Commented Jun 28, 2016 at 18:41
- 1 @JacobHeater I've added a live demo to the description. Please feel free to try it out over there. – dan Commented Jun 28, 2016 at 18:51
- 2 I opened rdar://45141145 with the reproduction steps above. They asked me to submit a sysdiagnose and a video of the issue as well, which I have just done. – tmm1 Commented Oct 15, 2018 at 21:40
- 2 Here are my findings, once you use ios safari back button, I think browser loading content from cache, therefore js is not working. Instead of using back button using window.history.go(-1) works. I tried to detect back buttons but I've failed. Additionally tried this but it didn't refresh. Maybe I'm missing something window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } }; – siniradam Commented Sep 2, 2019 at 21:29
- 4 Still a bug in 2022. – izaguirrejoe Commented Mar 22, 2022 at 14:13
2 Answers
Reset to default 1This is because of the back-forward cache in Safari.
You can use the following code to force a reload when the back-button is pressed.
window.onpageshow = function(e) { // e -> event
if (e.persisted) {
window.location.reload();
}
};
Additionally, if you are using jQuery ...
$(window).bind("pageshow", function(e) { // e -> event
if (e.originalEvent.persisted) {
window.location.reload();
}
});
one workaround would be instead the property onload on the button, create a function adding the listeners then call it on window.onpopstate and window.onload..