前言
在前端开发中，防止用户切屏（即切换到其他浏览器标签或窗口）通常可以使用 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 事件
