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

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

使用场景：

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

注意：虽然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地址

// 设置隐藏属性和改变可见属性的事件的名称
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;
}