Disable F5 and browser refresh using JavaScript

by

Update A recent comment claims this doesn’t work in the new Chrome … As shown in jsFiddle, and tested on my personal site, this method still works as of Chrome ver 26.0.1410.64 m

This is REALLY easy in jQuery by the way:

jsFiddle

// slight update to account for browsers not supporting e.which
function disableF5(e) { if ((e.which || e.keyCode) == 116) e.preventDefault(); };
// To disable f5
    /* jQuery < 1.7 */
$(document).bind("keydown", disableF5);
/* OR jQuery >= 1.7 */
$(document).on("keydown", disableF5);

// To re-enable f5
    /* jQuery < 1.7 */
$(document).unbind("keydown", disableF5);
/* OR jQuery >= 1.7 */
$(document).off("keydown", disableF5);

On a side note:
This only disables the f5 button on the keyboard.
To truly disable refresh you must use a server side script to check for page state changes.
Can’t say I really know how to do this as I haven’t done it yet.

On the software site that I work at, we use my disableF5 function in conjunction with Codeigniter’s session data. For instance, there is a lock button which will lock the screen and prompt a password dialog. The function “disableF5” is quick and easy and keeps that button from doing anything. However, to prevent the mouse-click on refresh button, a couple things take place.

  1. When lock is clicked, user session data has a variable called “locked” that becomes TRUE
  2. When the refresh button is clicked, on the master page load method is a check against session data for “locked”, if TRUE, then we simple don’t allow the redirect and the page never changes, regardless of requested destination

TIP: Try using a server-set cookie, such as PHP’s $_SESSION, or even .Net’s Response.Cookies, to maintain “where” your client is in your site. This is the more Vanilla way to do what I do with CI’s Session class. The big difference being that CI uses a Table in your DB, whereas these vanilla methods store an editable cookie in the client. The downside though, is a user can clear its cookies.

More Related Contents:

  1. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  2. Getting the ID of the element that fired an event
  3. JavaScript, browsers, window close – send an AJAX request or run a script on window closing
  4. JavaScript global event mechanism
  5. How to make HTML element resizable using pure Javascript?
  6. What are passive event listeners?
  7. Browser event when downloaded file is saved to disk
  8. Javascript trick for ‘paste as plain text` in execCommand
  9. Want to add “addEventListener” on multiple elements with same class [duplicate]
  10. Is there a way to get SSL certificate details using JavaScript?
  11. JavaScript mapping touch events to mouse events
  12. Intercept all ajax calls?
  13. How to distinguish mouse “click” and “drag”
  14. adding multiple event listeners to one element
  15. Using this inside an event handler
  16. Why don’t audio and video events bubble?
  17. How do I clear this setInterval inside a function?
  18. html onchange event not working
  19. Can multiple event listeners/handlers be added to the same element using Javascript?
  20. How to detect CSS3 resize events
  21. Javascript change event on input element fires on only losing focus
  22. Responding to the onmousemove event outside of the browser window in IE
  23. JavaScript/jQuery event listener on image load IE issues
  24. onDeviceReady not firing in PhoneGap hello world app
  25. onclick event function in JavaScript
  26. Keycode is always zero in Chrome for Android
  27. Capturing result of window.onbeforeunload confirmation dialog
  28. The “onchange” event does not work with “value” change in “text input” object
  29. Replacement for deprecated `keypress` DOM event
  30. Manually dispatchEvent DOMContentLoaded

Leave a Comment