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

1. 基本知识

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

2. Demo

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

类似的Demo如下：

<!DOCTYPE html>
<html lang="en">
    <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>
    <h1>请勿切屏！</h1>
    <p>尝试切屏将触发窗口重新聚焦。</p>
</body>
</html>
当用户试图切换到其他窗口时，浏览器会通过 blur 事件监听并使用 window.focus() 方法强制重新将焦点回到当前窗口 
3. 切屏失效
 
有矛就有盾 
 禁用 JavaScript： 用户可以通过禁用浏览器的 JavaScript 来使这个方法失效，因为 blur 和 focus 事件都依赖于 JavaScript
 
 浏览器插件：有一些浏览器插件可以帮助用户绕过这种防止切屏的机制，比如可以禁止弹出框，或者忽略 focus 事件
 
效果如动图：
需求描述：不难看出，这是只要考试页面不在当前页面的都会被看做是切屏，当超过设置的考试切屏允许的最大次数时（在考试管理里面会有这个功能），就会自动交卷停止作答。
关键点1：在vue生命周期mounted钩子里面，添加一个监听页面可见或不可见的事件visibilitychange
关键点2：为visibilitychange事件绑定一个函数，在此函数中获取页面元素的状态document.visibilityState
关键点3：调用后台接口，获取在考试管理
        function openwindow(){
            //创建的窗口大小宽高均为100px，
            w=window.open("","","width=100,height=100'");
            w.focus();
下面的例子可确保新的窗口得到焦点：<html>
<body><script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'my
                                    业务场景：老系统里（非SPA） 在主页面有很多子模块页面，在点击去到子模块a页面打开新窗口，如果a页面已经在浏览器打开则不打开新的窗口，切换至a页面窗口
首先，了解window对象
1.window.open
window.open('http://www.baidu.com') //打开一个新页面 返回打开的window对象本身
2.window.focus()
window.focus() //聚焦到当前页面
3.window.closed
window.closed  //可以拿到 window的
最近在弄在线客服的时候，想在收到信息时候让窗体自动弹出到最前，最小化的时候也是弹出到最前。本来以为很麻烦，问了好多人，都不知道，在网上查资料也没有查到。郁闷了好几天。
今天我终于实现了，其实很简单就一句代码
当收到信息的时候执行
window.focus();
就可以了。
最好再加上一个代码。如果页...
                                    js是一种较常用的Web页面开发脚本语言，功能一般是为web页面添加用户与页面的交互行为，是通过浏览器介质展现的。通常情况下用于检测“切屏”行为的功能主要会用到JS脚本中的jQuery框架中的blur()和focus()这两种方法。
说白了，就是看当前浏览器是否处于“焦点”状态。这是一个系统功能。
举个例子，如果一个浏览器或Windows程序处于“焦点”状态，其浏览器或程序的顶部状态条会呈现深灰色。
也就是说，这段JS代码只是调用了操作系统中的一个系统功能来判断你是否进行了切屏操作。
那么好了，我们知道原
blur() 方法可把键盘焦点从顶层窗口移开。 
语法：window.blur()说明 
方法 blur() 可把键盘焦点从顶层浏览器窗口移走，整个窗口由 Window 对象指定。哪个窗口最终获得键盘焦点并没有指定。提示和注释 
注释：在某些浏览器上，该方法可能无效。实例<html>
<body><script type="text/javascript">
myWindow=wind
解除网页限制脚本：
在线脚本（复制到浏览器打开即可安装）：https://greasyfork.org/scripts/14146-%E7%BD%91%E9%A1%B5%E9%99%90%E5%88%B6%E8%A7%A3%E9%99%A4...