js 离开或进入浏览器页面的事件监听 visibilitycha

当用户最小化窗口或切换到另一个选项卡时，API会发送visibilitychange事件，让监听者知道页面状态已更改。你可以检测事件并执行某些操作或行为不同。例如，如果您的网络应用正在播放视频，则可以在用户将标签放入背景时暂停视频，并在用户返回标签时恢复播放。 用户不会在视频中丢失位置，视频的音轨不会干扰新前景选项卡中的音频，并且用户在此期间不会错过任何视频。

使用场景：

1. 轮播图 只有在用户观看轮播图的时候才开启定时器 切换页面关掉定时器
2. 当用户最小化窗口或切换到另一个选项卡时，页面播放中的视频暂停，用户在此期间不会错过任何视频。这种体验是用户无感知的，并且对于用户体验是非常友好的。

注意：虽然onblur和onfocus会告诉你用户是否切换窗口，但不一定意味着它是隐藏的。当用户切换选项卡或最小化包含选项卡的浏览器窗口时，页面才会隐藏。

该API的属性和事件：

document.hidden:
如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。

document.visibilityState :

是一个用来展示文档可见性状态的字符串。可能的值：

• visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
• hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
• prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。 注释：浏览器支持是可选的。
• unloaded : 页面正在从内存中卸载。 注释：浏览器支持是可选的。

示例：

1. 开启关闭定时器：

        document.addEventListener('visibilitychange',function(){
        
        if(document.hidden){
            clearInterval(timer);    //清除定时器
        } else {
            timer = setInterval(autoMove, 3000);    //开启定时器
        }

    }

2. 视频播放切换：

demo地址

  <main>
    <video id="videoElement" controls="" poster="thumbnail.jpg">
        <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)"> 
        <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-Mobile.webm" type="video/webm" media="all and (max-width:680px)"> 
        <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.mp4" type="video/mp4">
        <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/The%2BVillage-SD.webm" type="video/webm">
        <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
    </video>
  </main>

// 设置隐藏属性和改变可见属性的事件的名称
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// 如果页面是隐藏状态，则暂停视频
// 如果页面是展示状态，则播放视频
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // 处理页面可见属性的改变
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // 当视频暂停，设置title
  // This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // 当视频播放，设置title
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}

兼容性处理：

为了支持老版本的浏览器，我们需要对document.hidden、document.visibilityState 在做一些前缀处理：

function getHiddenProp(){
        var prefixes = ['webkit','moz','ms','o'];
        // 如果hidden 属性是原生支持的，我们就直接返回
        if ('hidden' in document) {
          return 'hidden';
        }
        
        // 其他的情况就循环现有的浏览器前缀，拼接我们所需要的属性 
        for (var i = 0; i < prefixes.length; i++){
          // 如果当前的拼接的前缀在 document对象中存在 返回即可
          if ((prefixes[i] + 'Hidden') in document) {
            return prefixes[i] + 'Hidden';
          }  
        }
    
        // 其他的情况 直接返回null
        return null;
    }

function getVisibilityState() {
    var prefixes = ['webkit', 'moz', 'ms', 'o'];

    if ('visibilityState' in document) {
      return 'visibilityState';
    }

    for (var i = 0; i < prefixes.length; i++) {
        if ((prefixes[i] + 'VisibilityState') in document){
          return prefixes[i] + 'VisibilityState';
        }  
    }
    // 找不到返回 null
    return null;
}