判断页面显示隐藏

/*当其选项卡的内容变得可见或被隐藏时，会在文档上触发 visibilitychange (能见度更改)事件。*/
/*当 visibleStateState 属性的值转换为 `hidden `时，Safari不会按预期触发`visibilitychange`； 因此，在这种情况下，您还需要包含代码以侦听 `[pagehide]` 事件。*/
/*出于兼容性原因，请确保使用  document.addEventListener 而不是window.addEventListener来注册回调。 Safari <14.0仅支持前者。*/
/*  ios 页面离开时不会触发 再进来时触发   */
let hidden; let
  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'
}// 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
if (typeof document.addEventListener === 'undefined' || typeof document[hidden] === 'undefined') {
  window.console.log('This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.')
} else {
  // 处理页面可见属性的改变
  document.addEventListener(visibilityChange, () => {
    // 用户离开了当前页面
    if (document.visibilityState === 'hidden' || document[hidden]) {
      console.log('用户离开页面')
    }
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
      console.log('用户打开或回到页面')
    }
  }, false)
/*为了支持老版本的浏览器，我们需要对document.hidden在做一些前缀处理：*/
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;
}
/*document.visibilityState*/
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;
}

/*onfocus 属性用来获取或设置当前元素的focus事件的事件处理函数.*/
/*当前元素获得键盘焦点时会触发focus事件.*/
window.onfocus = () => {
  console.log('pageshow--------------------------------------->>>>>>>')
}
/*onblur属性用来获取或设置当前元素的onBlur事件的事件处理函数*/
/*当一个元素失去焦点时会触发blur事件.*/
window.onblur = () => {
console.log('pagehide--------------------------------------->>>>>>>')
}

/*当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)*/

window.addEventListener('pageshow', () => {
  console.log('pageshow--------------------------------------->>>>>>>')
 });

/*当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时, **`pagehide`**(页面隐藏)事件会被发送到一个 。例如，当用户单击浏览器的“后退”按钮时，当前页面在显示上一页之前会收到一个`pagehide`(页面隐藏)事件*/

window.addEventListener('pagehide', () => {
  console.log('pagehide--------------------------------------->>>>>>>')
});