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，加群备注‘地区-名字-技术类型’，以防乱加。

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

h5页面js监听页面失去焦点、获取焦点相关推荐

js监听页面或元素scroll事件，滚动到底部或顶部
基本原理: 1.滚动到底部元素的滚动距离 + 元素的可视距离 == 元素的滚动条总距离2.滚动到顶部元素的滚动距离 == 0 监听页面滚动 <!DOCTYPE html> <ht ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
js监听页面最大化，最小化事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
js监听页面元素变化window.MutationObserver
相信前端开发同学都熟悉各种各样的监听事件,比如元素点击事件onClick,鼠标事件onMouseDown.onMouseHover,键盘按键onKeyDown,浏览器窗口改变事件onResize等等. ...
JS监听页面----无鼠标键盘动作，自动跳页
监听页面鼠标键盘动作,若用户5秒没有任何操作,页面自动跳转 function ScreenSaver(settings){ this.settings = settings; this.nTimeou ...
JS监听页面元素删除子节点、增加子节点、修改子节点的内容
监听这个事件DOMSubtreeModified. 表示如果当前监听元素的子节点有改动:包括删除子节点.增加子节点.修改子节点的内容,都会触发这个事件. var container = documen ...
js监听页面焦点事件
document.addEventListener('visibilitychange', function () {var isHidden = document.hidden;if (isHidd ...
js 监听页面url锚点变化 window.onpopstate
window.onpopstate = function (event) {if (location.href.indexOf('#') == -1) {location.reload();}}; 解 ...
html+监听+页面滚动到底部,JS监听页面滚动到底部事件
敏捷开发之Scrum扫盲篇现在敏捷开发是越来越火了,人人都在谈敏捷,人人都在学习Scrum和XP... 为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解, ...

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

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

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

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

h5页面js监听页面失去焦点、获取焦点相关推荐

最新文章

热门文章