js监听浏览器tab页面变化

探索的小白

已于 2022-03-03 11:11:33 修改

阅读量3.2k

点赞数 3

文章标签： js

于 2021-03-02 10:04:30 首次发布

本文链接：https://blog.youkuaiyun.com/Smart_Developer/article/details/114253133

版权

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是事件名称（visibilitychange，click，mouseover，mouseout）等；
function内写需要执行的函数，也可写成箭头函数() => {}；

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

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

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

在csdn中发布的文章都是免费公开的，帮助自己记忆的同时也希望能帮到更多人，觉得有帮助的可以给博主点个赞，有问题的也欢迎指出来，共同进步