UzumakiItachi
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

UzumakiItachi

起风了,唯有努力生存。
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript

    • 手撕Promise
    • 手撕JS八股文系列
    • 手撕观察者模式和发布订阅模式
    • 页面可见性——visibilitychange
    • JS数据类型那点事儿
    • 作用域、执行上下文和this
    • 防抖和节流
    • 装饰器
    • JS设计模式小结
  • CSS

  • 前端
  • JavaScript
hanhanbuku
2023-03-03

页面可见性——visibilitychange

api简介

浏览器标签页隐藏或者显示的时候会触发visibilitychange事件,可以通过此事件判断用户是否正在浏览当前网页。

应用:

document.addEventListener("visibilitychange", function () {
    console.log('document.visibilityState=' + document.visibilityState);
    console.log('document.hidden=' + document.hidden, document.hidden ? '页面隐藏' : '页面显示');
});
1
2
3
4

此api在微信内置浏览器中也可用,同时在小程序的webview中也是会生效的。 可以解决小程序webview跳转到别的page后回退到webview不会触发webview网页重载的问题。 在webview内嵌的网页中写上visibilitychange监听就可以监听到webview是否被调出。 另外webview网页缓存问题可以通过link后加时间戳的方式重新加载,但是此办法会每次都新增一个页面栈,导致点击返回会一直在webview中返回,知道退出webview。比较好的解决办法是在网页中通过go方法返回到最初的页面栈,以解决网页缓存不会重载的问题

编辑 (opens new window)
上次更新: 2023/03/08, 09:35:38
手撕观察者模式和发布订阅模式
JS数据类型那点事儿

← 手撕观察者模式和发布订阅模式 JS数据类型那点事儿→

最近更新
01
小程序实现全局状态管理
07-09
02
前端检测更新,自动刷新网页
06-09
03
swiper渲染大量数据的优化方案
06-06
更多文章>
Theme by Vdoing | Copyright © 2023-2025 UzumakiItachi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式