当前位置：网站首页>h5中的页面显示隐藏执行事件

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

2022-07-02 03:20:00 【75624839】

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>
原网站

版权声明
本文为[75624839]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_37417446/article/details/125533067

边栏推荐

猜你喜欢

随机推荐