Web Visibilitychange

最新推荐文章于 2024-09-19 09:35:27 发布

SeriousLose

最新推荐文章于 2024-09-19 09:35:27 发布

阅读量524

点赞数 1

分类专栏： Web 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/SeriousLose/article/details/122231517

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了浏览器的visibilitychange事件，该事件在页面从隐藏变为显示或反之时触发。通过监听visibilityState属性，可以得知页面是处于可见、隐藏、预渲染还是已卸载的状态。示例代码展示了如何在页面可见和隐藏时打印相应信息，帮助开发者实现更智能的页面交互体验。

摘要由CSDN通过智能技术生成

visibilitychange

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.
- visible : 当前页面可见. 即此页面在前景标签页中，并且窗口没有最小化.
- hidden: 页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .
- prerender : 页面此时正在渲染中, 因此是不可见的. 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.
- unloaded : 页面从内存中卸载清除. 注意: 浏览器支持是可选的.

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState === "visible"){
    console.log(“hello，显示咯")
  }
  if(document.visibilityState === "hidden"){
    console.log("离开当前页")
  }
});

https://serious-lose.notion.site/Web-Visibilitychange-496d9051bda741e19fc0890913b3565e