Prevent refreshing / reloading a page with JavaScript

前端未结

关注

 2  720

I know this is not recommended, 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

相关标签:

2条回答

野趣味

2021-01-06 09:23
UPDATE: 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 recommend 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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
抹茶落季

2021-01-06 09:28
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;
  }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...