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();