js监听浏览器tab页面变化

js监听浏览器tab页面变化

引言

今天写到一个需求，当用户离开当前页面的时候，需要关闭页面的一个功能，查找资料发现了这个指令，个人觉得很有用，记录下来。。。

直接上代码

mounted:(){
  this.getListening()//主要是if()判断内的代码，这里可以任意方法调用
},
methods:{
  getListening(){
    if (document.hidden !== undefined) {
      document.addEventListener('visibilitychange', () => {
        if(document.hidden == true){
          console.log("离开页面")
        }else{
          console.log("进入页面")
        }
      })
    }
  }
},

写入上面的代码，利用document.addEventListener()方法，可以发现当离开当前tab页的时候，控制台输出true；当进入当前tab页的时候，控制台输出false。
可以按照自己的需求根据页面的状态添加指令。

备注

document.addEventListener('参数1',function(){},"参数2(可省)");

此函数为添加事件监听函数：

1. 参数1是事件名称（visibilitychange，click，mouseover，mouseout）等；
2. function内写需要执行的函数，也可写成箭头函数() => {}；

document.addEventListener('参数1',() => {},"参数2(可省)");

3. 参数2是布尔值（可省），指定事件是否 在捕获或冒泡阶段执行。
   true - 事件句柄在捕获阶段执行
   false- 默认。事件句柄在冒泡阶段执行

另-还有一个element.addEventListener()函数，感兴趣的可以研究一下
附事件监听函数（菜鸟教程）