I don't seem to be able to get the body onload="..." event to fire in Safari when the page is entered via the back button. It works fine in FF and IE. Is there a Javascript or jQuery solution?
Any help appreciated.
I don't seem to be able to get the body onload="..." event to fire in Safari when the page is entered via the back button. It works fine in FF and IE. Is there a Javascript or jQuery solution?
Any help appreciated.
Share Improve this question edited Feb 10, 2012 at 12:08 Anthony Grist 38.3k8 gold badges64 silver badges76 bronze badges asked Feb 10, 2012 at 12:02 Mark_54Mark_54 1,3034 gold badges15 silver badges21 bronze badges 5- does it work in chrome ? – Jorge Pinho Commented Feb 10, 2012 at 12:04
-
What does the code attached to the
onloadevent do? Are you sure that the event isn't firing at all, or is it just not doing anything visible? – Anthony Grist Commented Feb 10, 2012 at 12:09 - Jorge Pinho. I've not ried Chrome yet. Still working through the browsers... – Mark_54 Commented Feb 10, 2012 at 12:11
- This is a known issue. The bright side is that Safari "caches" UI state like form element states. – anddoutoi Commented Feb 10, 2012 at 12:11
- Anthony. It's refreshes the page depending a a flag value. I've set an alert to see if it fires when the back button is used. The alert es up fine in FF and IE but not Safari. Thus the refresh doesn't happen. – Mark_54 Commented Feb 10, 2012 at 12:13
5 Answers
Reset to default 4Try:
window.addEventListener("pageshow", function() {
alert('page shown');
}, false);
For Opera browser, read this: http://samuli.hakoniemi/onload-issues-with-opera/
This is well known. Safari and many other browser cache the page and when you navigate back to it, they just restore the previous state.
Here is a good MDN article about this topic (it's about FF 1.5 but should apply to other browsers as well): https://developer.mozilla/En/Using_Firefox_1.5_caching
Try the pageshow event like @zvona suggested.
if the onload event is not fired,you should set the cache-control.
<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
or add a tag in the body:
<iframe style=”height:0px;width:0px;visibility:hidden” src=”about:blank”>
this frame prevents back forward cache
</iframe>
This was the only thing that worked for me:
http://jkoder./prevent-safariany-browser-loading-from-cache-when-back-button-is-clicked/
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
Rather than using the onload attribute of the <body> tag, you could instead try using the DOM ready event with jQuery, like so:
$(document).ready(function() {
// your code here
});
Or, the shorthand version:
$(function() {
// your code here
});
Even if this doesn't solve your issue with Safari, it's still a good practice in general because it separates your HTML and Javascript into easily discernible parts.