当前位置：网站首页>浏览器窗口切换激活事件 visibilitychange

浏览器窗口切换激活事件 visibilitychange

2022-06-30 17:42:00 【AdleyTales】

<!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</title>
  <style>
  </style>
</head>

<body>
  <h1>浏览器窗口切换激活事件</h1>
  <div id="app"></div>

  <script>
    /**
     * visibilitychange：当浏览器可见性发生变化的时候，这个事件会被触发
     * 
     * 我们可以在document对象上注册一个监听visibilitychange事件，
     * 根据document.hidden或者document.visibilityState属性做一些业务逻辑。
     * 
     * 示例场景
     * 客户端内嵌H5页面经常遇到的一个场景：H5页面有一个视频，正在播放时，点击页面其他按钮，
     * 进入客户端原生页面，或者打开一个新的webview，这时视频应该暂停播放，返回该页面时，视频继续播放。
     * 
     */


    document.addEventListener('visibilitychange', (ev) => {
    
      // console.log(ev);
      console.log(document.hidden, document.visibilityState) // visible hidden
      console.log('----active window ------')

      if(!document.hidden) {
    
        doSomething()
      }
    }, false)

    function doSomething() {
    
      console.log('do some thing ...')
    }
  </script>
</body>

</html>