h5页面js监听页面失去焦点、获取焦点

小程序/uniapp等项目有onshow、onhide等生命周期。

其实在h5页面中对应的是页面激活、页面非激活状态。

应用场景：

eg：在某h5页面需要连接websoket，页面激活状态建立连接，页面失去焦点就关闭连接，那么就需要用到该方式。话不多说，直接上代码~

核心代码：

function pageVisibilityChange() {
	var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null,
		visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'),
		onVisibilityChange = function() {
			if (!document[hiddenProperty]) {
				console.log('页面激活');
			} else {
				console.log('页面非激活');
			}
		};
	document.addEventListener(visibilityChangeEvent, onVisibilityChange);
}

使用方式：

直接在页面调用函数pageVisibilityChange即可：

然后在页面激活、页面非激活里面写自己的业务代码。

pageVisibilityChange();

---

如果有帮助，可以点赞+收藏+关注，后续有更多知识与您分享！！！

欢迎加入QQ技术群：568984539，加群备注‘地区-名字-技术类型’，以防乱加。

关于本文，如果任何疑问的可以在评论区留言，我看到就会第一时间回复的。