目录
前言1. 基本知识2. Demo3. 切屏失效
前言
在前端开发中，防止用户切屏（即切换到其他浏览器标签或窗口）通常可以使用 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 事件