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

Question

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

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

最好的方法是什么？

- Salil

Answer 1

更新 最近的评论称这种方法在新版Chrome中不起作用...如jsFiddle所示，并在我的个人网站上测试，截至Chrome ver 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. 当单击刷新按钮时，在主页面加载方法中会检查会话数据是否存在“locked”，如果为TRUE，则根本不允许重定向，页面永远不会更改，无论请求的目标是什么

---

提示：尝试使用服务器设置的cookie，例如PHP的$_SESSION，甚至是.Net的Response.Cookies，以维护客户端在您的站点中的位置。这是比我使用CI Session类所做的更基础的方法。最大的区别在于，CI使用您的DB中的一个表，而这些基础的方法在客户端中存储可编辑的cookie。不过，缺点是用户可以清除其cookie。

- SpYk3HH

---

亲爱的，你的代码真的很棒。我在我的一个页面上尝试了一下，它禁用了该页面上所有控件的自动回发。之后我删除了这些代码行，但是自动回发仍然没有启用。我重新启动了计算机并清除了浏览器历史记录，但是自动回发仍然没有启用。这是什么原因呢？请指导我。 - Saroop Trivedi

经过广泛的测试，我发现这个函数在Chrome中仍然可以正常工作。也许我们可以看到你的其他代码？在这里查看Chrome中的工作示例。正如你所看到的，它可以正常工作，你的Down投票真的是不必要的。 - SpYk3HH

这真的很酷，但我有一个问题。 Ctrl + Shift + R 是用于硬重载，类似地，Ctrl + R 或 F5 是用于正常重载。我看到一些网站在长按重新加载按钮后提供执行所有操作的选项。是的，我们可以阻止这些键，但如何阻止该菜单在特定网站/页面上弹出？ - Code_Ninja

你可能还想添加Ctrl+F5和Ctrl+R的情况。 此外，大多数浏览器允许从上下文菜单中刷新。除了完全禁用上下文菜单（在大多数情况下应该避免），你几乎无法做任何事情。 - Dimitri Troncquo

当然，这并不完全禁用刷新。它只是阻止了F5键，如果文档有焦点的话。说“这在jQuery中非常容易”最多是不诚实的。 - Heretic Monkey

Answer 2

输入以下纯JS的简单脚本：

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

- Blackjack

---

结合使用 || (e.ctrlKey && e.keyCode == 82)，这无疑是目前为止提出的最简单的解决方案。 - Dimitri Troncquo

Answer 3

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

- Jos

Answer 4

从Enrique发布的网站上：

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

- kzh

---

请记住，这不会禁用“返回按钮”。第一行[window.history.forward(1);] 应该放在每个您不希望用户返回的页面上。简单来说，如果用户点击了后退按钮，则会重定向到他们所在的页面。这实际上只适用于“线性序列”页面，例如银行登录。其余部分只是我在答案中提到的 Vanilla JS 或 jQuery 方法。大多数地方已经用服务器端重定向或像 Node.js 这样的东西替换了第一行，它允许进行实时调用，例如 sockets，保持对用户正在做什么的常量标签。这更容易些。 - SpYk3HH

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

- gokhan

---

如果你在Mac上只按下 r 键，(e.which || e.keyCode) == 82 的条件也会成立。因此，如果你有一个文本框，就无法输入字母 r。 - sren

这会禁用键盘上的“r”键。 - Rumplin

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

- Orhun Alp Oral

Answer 7

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

- Hla Min Swe

---

这段代码毫无意义，因为在“返回点”之后存在无法到达的代码。 - Chris_F

在Firefox上它对我有点用，但在Chrome上不行。感觉如果详细说明一下如何使其更加健壮，这将是一个更有用的答案。 - user4490801

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)，它会返回true表示是火狐浏览器。

- Saurav S.

---

请不要在不同的问题中发布相同的答案。如果这些问题是重复的，请将其中一个标记为另一个的副本（或留下评论以说明）。否则，请根据所提出的问题调整您的答案。 - George Stocker

但是如果用户点击刷新按钮呢？ - Chetan

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

- Albert Maristany

Answer 10

如果您想禁用ctrl+f5、ctrl+R、f5和backspace，那么可以使用这个简单的代码。这段代码适用于Mozila和Chrome。将此代码添加到您的body标签中即可：

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

- Simran Jeet Singh Bagga