使用 JavaScript 禁用 F5 和浏览器刷新

Question

我想禁用使用 JavaScript 刷新浏览器。

目前，我正在使用window.onbeforeunload，我不希望在用户刷新浏览器时调用它。

最好的方法是什么？

Answer 1

更新 最近的一条评论声称这在新的 Chrome 中不起作用...如 jsFiddle 所示，并在我的个人网站上进行了测试，这种方法在 Chrome 版本26.0.1410.64 m 上仍然有效

顺便说一句，这在 jQuery 中真的很容易：

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

附带说明： 这只会禁用键盘上的 f5 按钮。 要真正禁用刷新，您必须使用服务器端脚本来检查页面状态更改。 不能说我真的知道该怎么做，因为我还没有这样做。

在我工作的软件站点上，我们将我的 disableF5 函数与 Codeigniter 的会话数据结合使用。例如，有一个锁定按钮可以锁定屏幕并提示密码对话框。功能“disableF5”快速而简单，并让该按钮不做任何事情。但是，为了防止鼠标单击刷新按钮，会发生一些事情。

1. 单击锁定时，用户会话数据有一个名为“locked”的变量变为 TRUE
2. 单击刷新按钮时，在主页面加载方法上检查会话数据是否“锁定”，如果为 TRUE，则我们简单地不允许重定向并且页面永远不会更改，无论请求的目标是什么

---

提示：尝试使用服务器设置的 cookie，例如 PHP 的 $_SESSION，甚至 .Net 的 Response.Cookies，来维护您的客户端的“位置”在您的网站中。这是我用 CI 的 Session 类做的更Vanilla的方法。最大的区别在于 CI 在您的数据库中使用了一个表，而这些 vanilla 方法在客户端中存储了一个可编辑的 cookie。但缺点是用户可以清除其 cookie。

Answer 2

var ctrlKeyDown = false;

$(document).ready(function(){    
    $(document).on("keydown", keydown);
    $(document).on("keyup", keyup);
});

function keydown(e) { 

    if ((e.which || e.keyCode) == 116 || ((e.which || e.keyCode) == 82 && ctrlKeyDown)) {
        // Pressing F5 or Ctrl+R
        e.preventDefault();
    } else if ((e.which || e.keyCode) == 17) {
        // Pressing  only Ctrl
        ctrlKeyDown = true;
    }
};

function keyup(e){
    // Key up Ctrl
    if ((e.which || e.keyCode) == 17) 
        ctrlKeyDown = false;
};

Answer 3

来自恩里克发布的网站：

window.history.forward(1);
document.attachEvent("onkeydown", my_onkeydown_handler);
function my_onkeydown_handler() {
    switch (event.keyCode) {
        case 116 : // 'F5'
            event.returnValue = false;
            event.keyCode = 0;
            window.status = "We have disabled F5";
            break;
    }
}

Answer 4

在纯 JS 中输入这个简单的脚本：

document.addEventListener('keydown', (e) => {
    e = e || window.event;
    if(e.keyCode == 116){
        e.preventDefault();
    }
});

Answer 5

对于mac cmd+r, cmd+shift+r 需要。

function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
$(document).on("keydown", disableF5);
});

Answer 6

将此用于现代浏览器：

function my_onkeydown_handler( event ) {
    switch (event.keyCode) {
        case 116 : // 'F5'
            event.preventDefault();
            event.keyCode = 0;
            window.status = "F5 disabled";
            break;
    }
}
document.addEventListener("keydown", my_onkeydown_handler);

Answer 7

$(window).bind('beforeunload', function(e) { 
    return "Unloading this page may lose data. What do you want to do..."
    e.preventDefault();
});

Answer 8

这是我用来在 IE 和 firefox 上禁用刷新的代码，适用于以下组合键：

F5   | Ctrl + F5   | Ctrl + R

//this code handles the F5/Ctrl+F5/Ctrl+R
document.onkeydown = checkKeycode
function checkKeycode(e) {
    var keycode;
    if (window.event)
        keycode = window.event.keyCode;
    else if (e)
        keycode = e.which;
                
    // Mozilla firefox
    if ($.browser.mozilla) {
        if (keycode == 116 ||(e.ctrlKey && keycode == 82)) {
            if (e.preventDefault)
            {
                e.preventDefault();
                e.stopPropagation();
            }
        }
    } 
    // IE
    else if ($.browser.msie) {
        if (keycode == 116 || (window.event.ctrlKey && keycode == 82)) {
            window.event.returnValue = false;
            window.event.keyCode = 0;
            window.status = "Refresh is disabled";
        }
    }
}

如果不想用useragent检测是什么类型的浏览器（$.browser用navigator.userAgent判断平台），可以用

if('MozBoxSizing' in document.documentElement.style) 为 firefox 返回 true

Answer 9

它适用于所有浏览器：

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

Answer 10

如果你想禁用 ctrl+f5 , ctrl+R , f5 ,backspace 那么你可以使用这个简单的代码。此代码适用于 Mozilla 和 Chrome 。在你的 body 标签中添加这段代码：

<body onkeydown="return (event.keyCode == 154)">

Answer 11

如果你使用 JSF，你可以直接使用富人脸的热键。

<rich:hotKey key="backspace" onkeydown="if (event.keyCode == 8) return false;" handler="return false;" disableInInput="true" />
<rich:hotKey key="f5" onkeydown="if (event.keyCode == 116) return false;" handler="return false;" disableInInput="true" />
<rich:hotKey key="ctrl+R" onkeydown="if (event.keyCode == 123) return false;" handler="return false;" disableInInput="true" />
<rich:hotKey key="ctrl+f5" onkeydown="if (event.keyCode == 154) return false;" handler="return false;" disableInInput="true" />