网页置为后台运行的监听（visibilitychange）

visibilitychange

通常这个功能在APP运用比较常见，比如正在播放的视频APP切换为后台运行，暂停视频播放，切回前台运行开启视频播放，那么h5网页有没有这个功能呢？

h5也新增了这个功能，就是visibilitychange

代码实现

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

  function handleVisibilityChange() {
    if (document[hidden]) {
      console.log('hidden 触发', hidden);
      alert('触发')
    } else {
      console.log('show 触发');
    }
  }
  // 如果浏览器不支持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);
  }
},