介绍document部分自带的方法及属性，场景使用例如倒计时等

适用场景页面不显示（不看）触发方法停止运行逻辑，页面显示（看）触发方法继续运行逻辑。
（例如倒计时）
操作手法触发，浏览器多页签切换时触发，或者当前页隐藏浏览器，再次打开浏览器触发

文档属性
visibilityState(只读属性)
值有三个
1.hidden：文档处于背景标签页或者窗口处于最小化状态或者操作系统正处于 ‘锁屏状态’
2.visible：只要页面可见，哪怕只露出了一个角 document.visibilityState也会返回visible
3.prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
在这里插入图片描述

文档方法
document.addEventListener可以添加一个方法在document对象
document.removeEventListener在document对象移除添加过的方法

visibilitychange方法
作用：文档页面可见或不可见都会触发该方法，结合document.visibilityState属性使用

例子如下

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
  head>
  <body>
    <div id="app" ref="app">
      <template id="father">
        <div>
          <h1>我是父组件页面h1>
        div>
      template>
      <hr>
    div>
  body>
  <script>
    Vue.component('father', {
      template: '#father',
    })
    let vm = new Vue({
      el: "#app",
      mounted () {
        console.log('mounted :>> ', 111)
        document.addEventListener('visibilitychange', this.handleVisibilityChange)
      },

      beforeDestroy () {
        console.log('beforeDestroy :>> ', 222)
        document.removeEventListener('visibilitychange', this.handleVisibilityChange)
      },
      methods:{
        handleVisibilityChange(){
            switch (document.visibilityState) {
            case 'visible':
            console.log('文档显示了触发我这方法 :>> ');
                // 可以写更新逻辑操作
                // 可以写启用逻辑运行操作
                break

            case 'hidden':
            console.log('文档隐藏了触发我这方法 :>> ');
                // 可以写停止逻辑运行操作
                break

            default:
            }
          console.log('document :>> ', document);
          console.log('document.visibilityState :>> ', document.visibilityState);
        }
      },
    });
  script>
html>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

相关阅读:
MySQL MVCC详细介绍
Python 编写确定个位、十位以上方法及各数位的和程序
动力节点Rabbitmq-18-21章RabbitMQ集群与高可用
Python综合练习题
IGS文件格式说明与下载方式- Renix atx ANTEX: The Antenna Exchange Format
【数据库系统概论】作业3 第三章习题4|5|9
MySQL常用时间函数
Idea 常用快捷键
Unity之ShaderGraph如何实现马赛克效果
前端笔记(html、css、vue、vue3、react、jquery)

原文地址：https://blog.csdn.net/qq_37734787/article/details/127568011