Created
August 6, 2019 13:23
-
-
Save cferdinandi/bceb240cf974dd8c2170ea6f007dce76 to your computer and use it in GitHub Desktop.
Solution from https://gomakethings.com/fixing-safaris-back-button-browser-cache-issue-with-vanilla-js/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>1 | Safari Bug</title> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
</style> | |
<script> | |
/** | |
* If browser back button was used, flush cache | |
* This ensures that user will always see an accurate, up-to-date view based on their state | |
* https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked | |
*/ | |
(function () { | |
window.onpageshow = function(event) { | |
if (event.persisted) { | |
window.location.reload(); | |
} | |
}; | |
})(); | |
</script> | |
</head> | |
<body> | |
<p id="app"></p> | |
<p><a href="2.html">Next Page →</a></p> | |
<script> | |
var app = document.querySelector('#app'); | |
app.textContent = new Date().toLocaleTimeString(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>2 | Safari Bug</title> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
</style> | |
<script> | |
/** | |
* If browser back button was used, flush cache | |
* This ensures that user will always see an accurate, up-to-date view based on their state | |
* https://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked | |
*/ | |
(function () { | |
window.onpageshow = function(event) { | |
if (event.persisted) { | |
window.location.reload(); | |
} | |
}; | |
})(); | |
</script> | |
</head> | |
<body> | |
<p id="app"></p> | |
<script> | |
var app = document.querySelector('#app'); | |
app.textContent = new Date().toLocaleTimeString(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Had a JS powered form that was misbehaving on back (some fields set, some waiting on user input) - using this allowed me to wipe the slate clean, thank you! π π₯