I know this is not remended, but I need it because I have an iframe inside the page who has the actual content and I want that when the users hits refresh button, iframe reloads not entire page.
I know I have to call onunload / onbeforeunload event, but I don't want to ask me if I want to leave the window, just don't.
Is that possible? I've got handled the F5 key, but I like to prevent refreshing from button too.
I know this is not remended, but I need it because I have an iframe inside the page who has the actual content and I want that when the users hits refresh button, iframe reloads not entire page.
I know I have to call onunload / onbeforeunload event, but I don't want to ask me if I want to leave the window, just don't.
Is that possible? I've got handled the F5 key, but I like to prevent refreshing from button too.
Share Improve this question edited Oct 24, 2011 at 19:58 pimvdb 155k80 gold badges311 silver badges356 bronze badges asked Oct 24, 2011 at 19:36 xusoxuso 7151 gold badge8 silver badges19 bronze badges 5-
6
This sounds like (sadly) a case for the
onbeforeunloadevent. You can use it to prompt the user and ask if they'd like to leave the page (refreshing counts as "leaving" the page). – user1385191 Commented Oct 24, 2011 at 19:39 - 8 You cannot and should not override the behavior the user expects from the browser. If you need "refresh" functionality within your app that works differently from the normal functionality of the Refresh button then build a refresh button into your app's UI. This is very mon (see Gmail, for example) and users will understand it far better than if you try to override their expected browser behavior. – Jordan Running Commented Oct 24, 2011 at 19:42
- @MattMcDonald Yeah, I know, but i don't want to ask user, just refresh the iframe and cancel refreshing-page event. – xuso Commented Oct 24, 2011 at 19:47
- @Jordan well, is not a bad option. Thanks. Expect more ments, just in case. – xuso Commented Oct 24, 2011 at 19:48
- 1 If you think popup adds are annoying imagine what would happen in a world where its possible to inhibit page redirection like that. – hugomg Commented Oct 24, 2011 at 20:34
2 Answers
Reset to default 7UPDATE: I wrote this 5 years ago, browsers do different stuff now, you can still use this for testing your browser set, but your experience may vary from my old research.
Experimenting using jQuery, because I'm lazy.
Theoretically, preventing the default behavior should stop the event from doing whatever it is supposed to do. It doesn't work with the events in my example and has different results in different browsers. I put the Math.random() in to determine if the page has been reloaded or not. Because different browsers do different things, I highly remend NOT using this in a production environment.
<body>
<p></p>
<script type="text/javascript">
$('p').append(Math.random());
$(window).bind({
beforeunload: function(ev) {
ev.preventDefault();
},
unload: function(ev) {
ev.preventDefault();
}
});
</script>
</body>
Using CTRL-R or F5 or Reload Button:
- Safari: Does nothing
- Chrome: Does nothing
- Opera 10 & 11: Does nothing
- Firefox 7.x: Shows a special prompt with two buttons:
- Stay on Page - Does not reload page
- Leave Page - Reloads the page
- IE7 & IE8: Shows a prompt with two buttons:
- OK - Reloads the page
- Cancel - Does not reload the page
- IE9: Shows a prompt with two buttons:
- Leave this page - reloads
- Stay on this page - does not reload
Firefox Prompt (you can tell I tested it on a Mac)
IE7 & IE8 Prompt
IE9 Prompt
In closing:
Yes, I did not test IE6, I deleted my VM which had it installed, I don't have a VM with IE10 beta installed, so you're out of luck on that too.
You might also experiment with cancelBubble and stopPropagation or maybe return false; might reveal something useful. I'm down with Jordan's reply that you shouldn't be trying to override the defaults, so I'm concluding my experiment here.
Returning false in an onsubmit event prevents the form from being submitted and stays in the same page without any user interaction..
For example..
when a form having input field is empty and submitted this javascript check for validation and returns accordingly.. If false is returned nothing is done(i.e. page is not refreshed or redirected)..
If the validation is ok and if true is returned the form action is performed..
function validateForm(Str) {
mystring=document.getElementById('inputid').value;
if(!mystring.match(/\S/)){
alert ('Please Enter a String.Field cannot be empty');
return false;
}else{
return true;
}
}