Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 211
xuso Avatar asked Oct 24 '11 19:10

xuso


1 Answers

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.

like image 112
Paul J Avatar answered Nov 03 '22 04:11

Paul J