前端window.blur() 和 window.focus() 防止切屏的基本知识

码农研究僧

于 2024-08-30 08:00:00 发布

阅读量266

点赞数 6

分类专栏：前端/小程序文章标签：前端 blur focus html 防止切屏

本文链接：https://blog.csdn.net/weixin_47872288/article/details/141564414

版权

前端/小程序专栏收录该内容

73 篇文章 8 订阅

订阅专栏

前言

在前端开发中，防止用户切屏（即切换到其他浏览器标签或窗口）通常可以使用 window.blur() 和 window.focus() 方法来实现

由于以下知识点比较简单，对此不长篇大论的概述

1. 基本知识

window.blur()：该方法会将当前窗口的焦点移开，导致窗口变为非活动状态。通常在用户切换到其他标签或窗口时会触发此事件
window.focus()：该方法用于将焦点重新集中到当前窗口，使其成为活动窗口

2. Demo

为了防止用户切屏，可以通过监听 blur 事件，当用户试图切屏时，强制将窗口重新聚焦

类似的Demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防止切屏示例</title>
    <script>
        // 当窗口失去焦点时，将其重新聚焦
        window.addEventListener('blur', function () {
            setTimeout(function () {
                window.focus(); // 重新聚焦窗口
                alert('请勿切屏！'); // 弹出提示
            }, 0);
        });
    </script>
</head>
<body>
    <h1>请勿切屏！</h1>
    <p>尝试切屏将触发窗口重新聚焦。</p>
</body>
</html>

当用户试图切换到其他窗口时，浏览器会通过 blur 事件监听并使用 window.focus() 方法强制重新将焦点回到当前窗口

3. 切屏失效

有矛就有盾

禁用 JavaScript：用户可以通过禁用浏览器的 JavaScript 来使这个方法失效，因为 blur 和 focus 事件都依赖于 JavaScript
浏览器插件：有一些浏览器插件可以帮助用户绕过这种防止切屏的机制，比如可以禁止弹出框，或者忽略 focus 事件

码农研究僧

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端window.blur() 和 window.focus() 防止切屏的基本知识

window.blur()：该方法会将当前窗口的焦点移开，导致窗口变为非活动状态。通常在用户切换到其他标签或窗口时会触发此事件window.focus()：该方法用于将焦点重新集中到当前窗口，使其成为活动窗口
复制链接

扫一扫