Skip to content

rdp模式下,不要响应F12、F5之类的功能键 #478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adeewu opened this issue Apr 9, 2025 · 4 comments
Open

rdp模式下,不要响应F12、F5之类的功能键 #478

adeewu opened this issue Apr 9, 2025 · 4 comments

Comments

@adeewu
Copy link

adeewu commented Apr 9, 2025

No description provided.

@dushixiang
Copy link
Owner

浏览器的快捷键优先级大于网页的,代码层面拦截不到。

@adeewu
Copy link
Author

adeewu commented Apr 9, 2025

我看有的网页是能禁止按F12打开调试模式的呢

@dushixiang
Copy link
Owner

我看有的网页是能禁止按F12打开调试模式的呢

你说的很有道理,我研究一下。

@dushixiang dushixiang reopened this Apr 9, 2025
@yanhao98
Copy link

yanhao98 commented Apr 9, 2025

试了一下下面的代码 Mac 上 Safari 不能拦截到 Cmd + R 。
Mac 上测试了 Firefox、Chrome。Mac 上 FN + F12 JS代码里能响应。
Windows 测试了 Firefox、edge。

Image Image Image Image

下面 AI 生成:


在 macOS 上,Cmd + R 是浏览器中常用的刷新页面快捷键。要在 HTML 页面中拦截这个组合键,依然可以使用 JavaScript 的键盘事件监听。不过,由于 Cmd + R 是系统级别的浏览器快捷键,完全阻止它的默认行为会比拦截单一按键(如 F5)更具挑战性,且效果取决于浏览器对事件处理的实现。

以下是一个尝试拦截 Cmd + R 的示例代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>拦截 Cmd + R</title>
</head>
<body>
    <h1>测试页面</h1>
    <p>尝试按 Cmd + R</p>

    <script>
        document.onkeydown = function(event) {
            event = event || window.event;

            // Cmd 键对应 metaKey,R 键的 keyCode 是 82
            if (event.metaKey && event.keyCode === 82) {
                event.preventDefault(); // 尝试阻止默认行为
                alert("Cmd + R 已被禁用!");
                return false;
            }
        };
    </script>
</body>
</html>

关键点:

  1. metaKey:在 macOS 上,Cmd 键会被识别为 metaKey。你需要检查 event.metaKey 是否为 true
  2. keyCode 82R 键的键码是 82。
  3. event.preventDefault():用于阻止默认的刷新行为。

局限性:

  • 浏览器支持:并非所有浏览器都允许 JavaScript 完全拦截 Cmd + R。例如,Safari 和 Chrome 在某些情况下可能会优先执行刷新,而忽略 preventDefault()
  • 用户绕过:用户仍然可以通过菜单栏的“刷新”选项(View > Reload)或鼠标操作刷新页面。
  • 不一致性:不同浏览器(如 Firefox、Safari、Chrome)的实现可能导致拦截效果不一致。

更可靠的替代方案:

由于直接拦截 Cmd + R 的可靠性有限,如果你需要在 macOS 上防止页面刷新,可以考虑以下方法:

  1. 监听页面卸载事件
    使用 beforeunload 事件,在页面即将刷新或关闭时弹出确认框:

    window.onbeforeunload = function() {
        return "确定要刷新页面吗?";
    };

    这会强制用户确认是否刷新,虽然不能完全阻止,但可以起到干扰作用。

  2. 全屏模式
    通过 document.documentElement.requestFullscreen() 将页面设置为全屏模式,减少用户访问浏览器菜单的机会。

  3. 应用层控制
    如果这是一个特定应用场景(例如在线考试),可以考虑将网页嵌入一个原生 macOS 应用(使用 Electron 或类似工具),然后在应用层禁用 Cmd + R

测试建议:

在 macOS 上测试时,建议在主流浏览器(Safari、Chrome、Firefox)中都试一下,确保代码行为符合预期。如果你的目标是特定浏览器,可以告诉我,我会进一步调整代码!


在 HTML 页面中完全禁止响应 F5(刷新)和 F12(开发者工具)是非常困难的,因为这些功能是由浏览器控制的,用户始终可以通过其他方式绕过限制。不过,你可以通过 JavaScript 来捕获这些按键事件并阻止默认行为,从而在一定程度上限制它们的使用。以下是一个简单的实现方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>禁用 F5 和 F12</title>
</head>
<body>
    <h1>测试页面</h1>
    <p>尝试按 F5 或 F12</p>

    <script>
        document.onkeydown = function(event) {
            // 兼容不同的浏览器
            event = event || window.event;
            let keyCode = event.keyCode || event.which;

            // F5 的 keyCode 是 116,F12 的 keyCode 是 123
            if (keyCode === 116 || keyCode === 123) {
                event.preventDefault(); // 阻止默认行为
                alert("此功能已被禁用!");
                return false;
            }
        };
    </script>
</body>
</html>

说明:

  1. F5 (keyCode 116):通常用于刷新页面。通过 event.preventDefault() 可以阻止刷新行为。
  2. F12 (keyCode 123):用于打开开发者工具,同样可以尝试阻止。
  3. 兼容性:代码中使用了 event || window.eventkeyCode || which 来兼容不同浏览器。
  4. 提示:当用户按下这些键时,会弹出一个警告框,提示功能被禁用。

局限性:

  • 绕过方式:用户仍然可以通过浏览器菜单、右键刷新、快捷键组合(如 Ctrl+R 或 Ctrl+Shift+I)或直接关闭页面来绕过这些限制。
  • 不推荐过度限制:这种方法可能会影响用户体验,通常只在特定场景(如考试系统、防止误操作)下使用。
  • 现代浏览器限制:一些浏览器可能忽略对某些快捷键的拦截,尤其是开发者工具相关的键(F12、Ctrl+Shift+I 等)。

更严格的方案:

如果你需要更强的控制(例如考试系统),可以考虑:

  1. 全屏模式:结合 requestFullscreen() 强制页面全屏,减少用户访问浏览器菜单的机会。
  2. 禁用右键:通过 document.oncontextmenu = function() { return false; }; 禁用右键菜单。
  3. 检测开发者工具:通过定时检查窗口大小或调试状态来检测开发者工具是否被打开(例如 window.outerWidth - window.innerWidth)。

如果你有具体场景或更严格的需求,可以告诉我,我会进一步优化方案!


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants