Disable F5 and browser refresh using JavaScript
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.
- When lock is clicked, user session data has a variable called "locked" that becomes TRUE
- 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.
How do I disable the F5 refresh on the browser?
This will disable F5, but not the actual refresh function:
document.onkeydown = function (e) {
if (e.keyCode === 116) {
return false;
}
};
On Chrome/XP, at least.
Can I disable browser refresh in my webapp?
I have a suggestion. There is an answer box in this page.
(Here below with Your Answer label)
- Type some text in it.
- Then refresh this page
When you refresh there is some warning message displayed, I suggest you to display the similar warning message, instead of disabling the refresh functionality.
Disable refresh browser in only one page using angularjs or javascript
document.onkeydown = function(){
switch (event.keyCode){
case 116 : //F5 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 82 : //R button
if (event.ctrlKey){
event.returnValue = false;
event.keyCode = 0;
return false;
}
}
}
This code helps you to prevent f5 and ctrl + R functionality
Related Topics
Angular 4:How to Get Index of Selected Value in a Datalist
How to Display Base64 Encoded Pdf
Next.Js Implement External ".Js" With <Script>
404 Error When Trying to Register Serviceworker
How to Sort Json Array Elements in Descending Order
Converting Async/Await Function to Normal Es5 Targetting Ie 11
Want to Hide Menu by Clicking Outside the Menu Element
Angular:Onclick on HTML Element According to Its Class
How to Implement Multiple Checkbox Using React Hook
What Is the Opposite of Evt.Preventdefault();
How to Know If Browser Tab Is Already Open Using JavaScript
How to Escape an Ampersand in a JavaScript String So That the Page Will Validate Strict
Modifying a Query String Without Reloading the Page
Fix: Js Recursive Function to Get the Nested (Multilevel) Child Objects as Array of Objects
How to Conditionally Include Script Element in Angular