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

js监听浏览器tab页面变化相关推荐

linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
vue js监听浏览器tab页切换
最近开发了需求,浏览器播放视频,切换到其他tab页面视频暂停,切换回来视频重新播放.监听属性addEventListener用起来啊. 一顿操作猛如虎-结果能监听到离开和回来,但是这时候页面的dom找 ...
js监听浏览器关闭页面事件
window.onbeforeunload = function() {//功能函数 } window.onbeforeunload = function(e) {var e = window.eve ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
vue监听浏览器tab切换
vue监听浏览器tab切换描述监听tab切换浏览器页面,在离开当前页面和再次进来发生事件监听,类似与小程序的show函数 visibilitychange 详解解决 created() {doc ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
js 监听浏览器窗口大小变化
监听浏览器大小变化 window.addEventListener('resize', function() {// 变化后需要做的事console.log("bianhuale====== ...
js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge，Chrome和Firefox)
由于各浏览器兼容性不同,所以首先要先区分各浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = use ...
js 监听浏览器刷新还是关闭事件
// $(window).bind('beforeunload',function(){return '您输入的内容尚未保存,确定离开此页面吗?';}); // window.onbeforeunlo ...

js监听浏览器tab页面变化

js监听浏览器tab页面变化

引言

直接上代码

js监听浏览器tab页面变化相关推荐

最新文章

热门文章