页面可见性改变事件：visibilitychange

最新推荐文章于 2025-10-13 09:06:41 发布

原创最新推荐文章于 2025-10-13 09:06:41 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

5 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细解析了H5页面在不同设备和浏览器环境下，如PC、安卓和iOS设备上的可见性变化触发的事件。文章阐述了在各种场景下，如刷新页面、切换页面、关闭窗口等，document.visibilityState属性的变化情况及其对发送请求的影响。

刷新H5页面，会触发该事件，由于刷新导致该页面消失时，会检测到document.visibilityState === ‘hidden’
切换页面（包括切换离开和切换回来），导致页面暂时不处于激活状态时，会触发该事件。切换离开时document.visibilityState === ‘hidden’，切换回该页面时，document.visibilityState === ‘visible’
关闭页面窗口时，会触发该事件。关闭窗口时，document.visibilityState === ‘hidden’
关闭整个浏览器时，会触发该事件。关闭整个浏览器时，document.visibilityState === ‘hidden’

说明：当页面的document.visibilityState === 'hidden’时，是可以发送请求的

刷新H5页面，会触发该事件，由于刷新导致该页面消失时，会检测到document.visibilityState === ‘hidden’
点击页面上方的 x 按钮（或是其他关闭按钮），导致页面关闭时，会触发该事件。并在关闭时，document.visibilityState === ‘hidden’
切换页面（包括切换离开和切换回来），导致页面暂时不处于激活状态时，会触发该事件。切换离开时document.visibilityState === ‘hidden’，切换回该页面时，document.visibilityState === ‘visible’
将页面或页面所在程序软件切换到后台，或从后台切换到前台时，会触发该事件。切换到后台时，document.visibilityState === ‘hidden’；切换到前台时，document.visibilityState === ‘visible’
手势滑动关闭页面或页面所在程序软件时，document.visibilityState === ‘hidden’

说明：当页面的document.visibilityState === 'hidden’时，是可以发送请求的

刷新H5页面，会触发该事件，由于刷新导致该页面消失时，会检测到document.visibilityState === ‘hidden’
点击页面上方的 x 按钮（或是其他关闭按钮），导致页面关闭时，会触发该事件。并在关闭时，document.visibilityState === ‘hidden’
切换页面（包括切换离开和切换回来），导致页面暂时不处于激活状态时，会触发该事件。切换离开时document.visibilityState === ‘hidden’，切换回该页面时，document.visibilityState === ‘visible’
将页面或页面所在程序软件切换到后台，或从后台切换到前台时，会触发该事件。切换到后台时，document.visibilityState === ‘hidden’；切换到前台时，document.visibilityState === ‘visible’
手势滑动关闭页面或页面所在程序软件时，document.visibilityState === ‘hidden’

说明：当页面的document.visibilityState === 'hidden’时，是不可以发送请求的，发送的请求会被销毁掉