当前位置：网站首页>The page in H5 shows hidden execution events

The page in H5 shows hidden execution events

2022-07-02 03:24:00 【seventy-five million six hundred and twenty-four thousand eight】

visibilitychange event

Is the browser's new event method , It is mainly used to monitor whether the page is displayed , Now mainstream browsers support this event , When the browser switches tabs , To minimize the , This event will be triggered automatically during maximization and other operations .

document.hidden attribute

Used to indicate whether the current page is hidden or active display , When the page is hidden and inactive, the value is true, When the page is active, the value is false, The property is read-only .
We can pass the above visibilitychange Event combination document.hidden Do some effect

A page with background music ：

<!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> test document.hidden</title>
</head>
<body>
  <!--  Create a player  -->
  <audio id="audioDom" src="https://aimg8.oss-cn-shanghai.aliyuncs.com/VUEAdmin/gameActivity/DaZhuanPan/back_music.mp3"></audio>
  <!--  A play button  -->
  <button id="btn"> Play </button>
  <script> //  Get... On the page audio player Dom Elements  var audioDom = document.getElementById('audioDom'); //  Bind the event to the button and play the music when it is clicked  document.getElementById('btn').addEventListener('click', function(){
       audioDom.play(); }); //  to document Bind one visibilitychange event , This event is executed when the current page is displayed or hidden  document.addEventListener("visibilitychange", function() {
       //  Judge the present document Whether to show or hide  if(!document.hidden){
       //  If it is in the display state, perform the music playing operation  audioDom.play(); }else{
       //  If it is hidden, perform music pause  audioDom.pause(); } }); </script>
</body>
</html>
原网站

版权声明
本文为[seventy-five million six hundred and twenty-four thousand eight]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/183/202207020319395595.html

边栏推荐

猜你喜欢

随机推荐