JS判断用户是是否离开当前页面

2018-01-22 约 536 字预计阅读 2 分钟

JS 判断用户是是否离开当前页面

文章目录

1. 介绍
2. 代码
3. 效果
4. document.visibilityState 监听浏览器最小化

1. 介绍

visibilitychange事件：用于判断用户是否离开当前页面

2. 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初始化</title>
  </head>

  <body>
    <script>
      !(function () {
        // 添加事件监听
        document.addEventListener("visibilitychange", function () {
          let pageVisibility = document.visibilityState;
          // 页面变为不可见时触发
          if (pageVisibility == "hidden") {
            document.title = "主人，你去哪儿了？";
          }
          // 页面变为可见时触发
          if (pageVisibility == "visible") {
            document.title = "主人，你终于回来了？";
          }
        });
      })();
    </script>
  </body>
</html>

3. 效果

4. `document.visibilityState` 监听浏览器最小化

document.hidden表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览器最小化（注意，页面被其他软件遮盖并不算隐藏，比如打开的 vscode 遮住了浏览器）。

document.visibilityState值：

hidden：页面在后台标签页中或者浏览器最小化
visible：页面在前台标签页中
prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
unloaded：页面正在从内存中卸载

visibilitychange 事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件

这样，我们可以监听 visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理

目录