h5中的页面显示隐藏执行事件

visibilitychange事件

是浏览器的新事件方法，他主要是用来监听页面是否处于显示状态，现在主流的浏览器都支持此事件，当浏览器进行切换选项卡，最小化，最大化等操作的时候会主动触发该事件。

document.hidden属性

用来表示当前页面是隐藏状态还是激活显示状态，当页面是隐藏非激活状态的时候该值为true，当页面是激活状态的时候该值为false，该属性为只读属性。
我们可以通过上边的visibilitychange事件结合document.hidden做一些效果

一个带背景音乐的页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试document.hidden</title>
</head>
<body>
  <!-- 创建一个播放器 -->
  <audio id="audioDom" src="https://aimg8.oss-cn-shanghai.aliyuncs.com/VUEAdmin/gameActivity/DaZhuanPan/back_music.mp3"></audio>
  <!-- 一个播放按钮 -->
  <button id="btn">播放</button>
  <script>
    // 获取页面中的audio播放器Dom元素
    var audioDom = document.getElementById('audioDom');
    // 给按钮绑定事件单击的时候进行音乐播放
    document.getElementById('btn').addEventListener('click', function(){
      audioDom.play();
    });
    // 给document绑定一个visibilitychange事件，当前页面显示或者隐藏的时候执行该事件
    document.addEventListener("visibilitychange", function() {
      // 判断当前document是显示状态还是隐藏状态
      if(!document.hidden){
        // 如果是显示状态执行音乐播放操作
        audioDom.play();
      }else{
        // 如果是隐藏状态执行音乐暂停操作
        audioDom.pause();
      }
    });
  </script>
</body>
</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

相关阅读:
【jmeter+ant+jenkins】之搭建接口自动化测试平台
使用序列到序列深度学习方法自动睡眠阶段评分
Node.js_mongodb数据迁移
ElasticSerach+MongoDB：实现文章检索历史功能
C语言开发，指针进阶，字符串查找，包含，拼接
LAPM概述及配置
shell脚本基础教程，快速上手
vite + vue3 + ts配置《企业级项目》二次封装el-table、分页
Rebex Total Pack R6.9 Crack
肖sir__面试接口测试

原文地址：https://blog.csdn.net/qq_37417446/article/details/125533067