js监听当前页面是否处于浏览状态

本文介绍了两种JavaScript方法来监听当前页面是否处于浏览状态:1) 使用`visibilitychange`事件,通过`document.visibilityState`判断;2) 通过`window.onfocus`和`window.onblur`事件监听页面焦点变化。这些技术对于实现页面行为跟踪和优化用户体验非常有用。
摘要由CSDN通过智能技术生成

js监听当前页面是否处于浏览状态有以下两种方法:

1. 监听页面documentvisibilitychange 事件

通过监听documentvisibilitychange事件时,获取到的 visibilityState 变量的值来判断当前页面的状态。

document.addEventListener('visibilitychange',() => {
	const state = document.visibilityState
	console.log(state) // hidden 表示当前页面切换为隐藏状态,visible表示当前页面切换为浏览状态
})
2. 为window添加 onfocus, onblur 事件

通过 window 中的 onfocusonblur 事件来判断。当触发 onfocus 事件时则当前页面刚刚切换至浏览状态,当触发 onblur 事件时则当前页面刚刚切换至隐藏状态。

window.onfocus = (e) =>{
	 console.log('focus');
}
window.onblur = (e) => {
	console.log('blur');
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_陌默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值