Geek Answers Handbook

Prevent page refresh / reload using JavaScript

I know this is not recommended, but I need it because I have an iframe inside the page that has the actual content, and I want the iframe button to reload not the whole page when I click the refresh button.

I know that I need to trigger the onunload / onbeforeunload , but I do not want to ask me if I want to leave the window, just not.

Is it possible? I processed the F5 key, but I like to also prevent updating from the button.

+4
javascript event-handling refresh
source share
2 answers

UPDATE: I wrote this 5 years ago, now browsers do different things, you can still use this to test your set of browsers, but your experience may differ from my old research.

Experimenting using jQuery because I'm lazy.

Theoretically, preventing default behavior should stop the event from what it should do. It does not work with events in my example and has different results in different browsers. I installed Math.random () to determine if the page was reloaded or not. Since 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 the reset button:

  • Safari: does nothing
  • Chrome: does nothing
  • Opera 10 and 11: does nothing
  • Firefox 7.x: shows a special prompt with two buttons:
    • Stay on the page - does not reload the page
    • Leave page - reloads page
  • IE7 and IE8: shows a prompt with two buttons:
    • OK - reload page
    • Cancel - does not reload the page
  • IE9: shows a prompt with two buttons:
    • Leave this page - reload
    • Stay on this page - do not reload

Firefox Prompt (you can say that I tested it on Mac)

Firefox prompt

IE7 and IE8 Prompt

IE7 & IE8 Prompt

IE9 Prompt

IE9 Prompt

Finally:

Yes, I did not test IE6, I deleted my virtual machine on which it was installed, I do not have a virtual machine with IE10 beta installed, so you are out of luck too.

You can also experiment with cancelBubble and stopPropagation, or possibly return false; may show something useful. I disagree with Jordan's answer that you should not try to override the defaults, so I am ending my experiment here.

+3
source share

Returning false in the onsubmit event prevents the form from being submitted and stays on the same page without any user interaction.

For example..

when the form with the input field is empty and this javascript check is submitted to check and return accordingly. If false is returned, nothing is done (that is, the page is not updating or redirecting).

If the validation is correct and true is returned, the form action is executed.

 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; } }
+1
source share

More articles:


All Articles