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

最新推荐文章于 2024-04-19 16:37:41 发布

Mr.菓菓

最新推荐文章于 2024-04-19 16:37:41 发布

阅读量1.1k

点赞数

分类专栏：前端 JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37417446/article/details/125533067

版权

前端同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

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>