visibilitychange事件

visibilitychange是浏览器新添加的一个事件 当浏览器当前页面被最小化 或者切换到浏览器的其他标签页 或者从其他页面或应用返回到当前标签页 都会触发这个事件 document.visibilityState共有四个值 1.hidden：文档处于背景标签页或者窗口处于最小化状态 或者操作系统正处于 ‘锁屏状态’ 2.visible：只要页面可见，哪怕只露出了一个角 document.visibilityState也会返回visible 3.prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true 4.unloaded 已废弃

另外 当document.visibilityState属性返回visible时，document.hidden属性返回false；其他情况下，都返回true。

hidden和visible状态所有浏览器都支持，prerender则是可选状态，非必须

vue中使用

mounted() {  
  document.addEventListener('visibilitychange', this.handleVisiable)  
},  
destroyed() {  
  document.removeEventListener('visibilitychange', this.handleVisiable)  
},  
methods: {  
  handleVisiable(e) {  
    switch(e.target.visibilityState) {    
		// 用户离开了当前页面
        case 'hidden':
          document.title = "页面不可见";
          break;   
		// 用户打开或回到页面
        case 'visible':
         document.title = "页面可见";
         break;
        }
  }
}

html中直接使用

  <script>
    document.addEventListener('visibilitychange', function () {
      console.log(document.visibilityState)
      switch (document.visibilityState) {
        // case 'prerender'://网页预渲染，内容不可见
        //   break;
        case 'hidden'://内容不可见，处理后台、最小化、锁屏状态
          document.title = "再看看嘛~"
          break;
        case 'visible'://处于正常打开
          document.title = "欢迎回来~"
          setTimeout(()=>document.visibilityState == 'visible' ? document.title = "博客捏" : false, 3000);
          break;
      }
    })
  </script>