当前位置：网站首页>Browser window switch activation event visibilitychange

Browser window switch activation event visibilitychange

2022-06-30 19:17: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> Browser window switch activation event </h1>
  <div id="app"></div>

  <script>
    /**
     * visibilitychange： When browser visibility changes , This event will be triggered 
     * 
     *  We can do it in document Object visibilitychange event ,
     *  according to document.hidden perhaps document.visibilityState Attributes do some business logic .
     * 
     *  Example scenario 
     *  Client embedded H5 A scenario often encountered on a page ：H5 Page has a video , While it's playing , Click other buttons on the page ,
     *  Enter the client native page , Or open a new webview, The video should be paused , When returning to this page , The video continues to play .
     * 
     */


    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>