Prevent refreshing / reloading a page with JavaScript

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 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.

Answers:

Answer

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)

Firefox Prompt

IE7 & IE8 Prompt

IE7 & IE8 Prompt

IE9 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.

Answer

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;
  }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.