js利用document.visibilityState 实现类似原生的onShow onHide事件的监听 以及 监听 切换标签页

最新推荐文章于 2023-06-15 11:37:09 发布
最新推荐文章于 2023-06-15 11:37:09 发布
阅读量781 收藏 1
点赞数
文章标签： javascript 网页实现onshow事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QingWaXieZi/article/details/114797526
版权

     移动端嵌入的webview一直有一个困扰就是网页端没有onShow事件 这样有很多需求都不太好做; 其实早就有了一个事件来做这个事儿; 经过我测试 目前最新版本的ios14和安卓10 11 兼容性都没问题; 可以正常使用. 所以把这个方法记录一下 分享给还不知道的小伙伴; 具体的文档我放个地址 可以自行去查看 这里我简单放一个录像演示一下

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilityState

视频展示:

展示visibilitychange事件

 

大米绿豆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5中的文档可见性状态（JavaScript）
ZuqCloud的博客
09-29 75
文档可见性状态（document.visibilityState）是HTML5中的一个JavaScript属性，用于确定当前文档在浏览器中的可见性情况。这对于开发需要根据文档可见性状态进行相应操作的应用程序非常有用，比如自动暂停视频播放或减少后台运行的任务。总之，通过document.visibilityState属性，我们可以方便地检测并响应文档在浏览器中的可见性变化。“prerender”（预渲染）：表示当前文档正在进行预渲染，即浏览器正在后台渲染该文档，但用户尚未看到其内容。// 文档可见时的操作。
微信小程序监听用户登录事件的实现方法
10-16
在微信小程序中，监听用户登录事件对于提供个性化服务和确保用户体验流畅至关重要。本文将深入探讨如何在小程序中实现这一功能，特别是在面临用户状态全局同步、页面生命周期管理等挑战时的解决方案。 首先，我们要...
原生js实现小程序的onShow onHide功能
feng_zhi1的博客
06-28 1426
js // 这里有三个状态 prerender，visible 和 hidden let pageVisibleStatus = document.visibilityState; // 监听页面状态 document.addEventListener('visibilitychange', function() { // 页面状态变化为不可见时触发 if (document.visibilityState == 'hidden') { ... } // 页面状态变化为可见时触发.
js实现uni中生命周期onShow的功能
Sissi的个人笔记
04-02 1849
关于onShow uni官方文档中onShow的说明： onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。 其他 H5新增了一个事件visibilitychange(能见度更改)用来实现和onShow一样的功能。 使用方法： document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); //页面显示时document.vis
Document.visibilityState
关灯吃面
01-03 392
Document.visibilityState 可以配合获取阅读时长
js map 只输出key_原生js实现简单路由切换
weixin_39940182的博客
11-03 165
前言：现在前端技术火热，各种前端框架更是层出不穷。在过去，路由切换只出现在后台里，前台想要切换到某个页面，需要向后端请求，随后后端完成路由切换。但是随着SPA单页面应用程序的发展，前端路由也逐渐火热。单页面应用顾名思义就是网页只有一个HTML，但是当我们点击导航的时候，页面url会改变，网页也会显示不同的内容，这就是前端路由所做的事。其实总的来说就是一句话：js监测url的变化，从而改变显示内容。...
详解小程序中h5页面onShow实现及跨页面通信方案
10-16
主要介绍了小程序中h5页面onShow实现及跨页面通信方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
城市切换_微信小程序模板js代码前台前端H5页面源码.rar
最新发布
08-09
在这个“城市切换_微信小程序模板js代码前台前端H5页面源码.rar”压缩包中，包含了一个实现城市切换功能的微信小程序模板，以及对应的JavaScript（js）代码和H5页面源码。以下将详细解析这个模板中的关键知识点： 1...
微信小程序demo：仿one：滑动切换页面
03-15
在微信小程序中，实现滑动切换页面的关键在于理解其页面结构和事件监听机制。每个小程序由多个页面组成，每个页面都有对应的JSON配置文件、WXML（结构层）文件、WXSS（样式层）文件以及JS（逻辑层）文件。在这个项目...
用velocity.js实现页面滚动切换效果
kvhur的博客
07-07 183
  在线演示1   在线演示2   在线演示3   在线演示4   在线演示5   本地下载         页面滚动切换效果 原文链接：http://www.gbtags.com/gb/share/5650.htm 今天介绍一个Javascript的小型的动画插件velocity.js，可以方便高效的开发一个具有多页面滚动切换效果的网站...
visibilityState的使用
weixin_44727080的博客
03-19 1809
前言： visibilityState返回document的可见性,即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后,或是不可见的隐藏的标签页，或者(正在)预渲染 1、介绍visibilityState 这是一个HTML5新提供的一个api，主要作用就是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指的是当前标签是否正在被用户浏览。 2、应用场景 监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户...
JavaScript原生切换效果
qq_44017357的博客
11-27 152
<div id="mingdiantu"> <div class="mingdiantu_nei"> <div class="mingdiantu_nei_top"> <div class="mingnei_ren left"> <img src="img/mingdian_01.jpg"/> </div> <div class="mingnei_biao right"&gt
javascript 监听页面的显示隐藏
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
05-26 2901
javascript 监听页面的显示隐藏，兼容 Android & iOS
onshow
啊啊啊啊2
07-31 689
当小程序启动或者从后台重新进入的时候会触发事件
JS中的PageVisibility API
kangng的博客
01-30 353
Page Visibility API : 判断页面可见性 由三部分组成： 1. document.hidden (返回布尔值) : 页面是否隐藏，切页，最小化 2. document.visibilityState (返回字符串) : 返回四个可能的状态值 "visible" ：页面可见"hidden" : 切页或浏览器最小化"prerender" : 页面正在渲染"unload
html5界面可视化事件
weixin_33831673的博客
01-03 310
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件
opinion001的博客
06-15 1401
在过去，开发人员通常会在页面上运行许多 JavaScript 动画或视频播放等操作，这些操作会消耗大量的 CPU、GPU 或网络带宽资源，从而影响页面的性能和响应速度。通过监视visibilityState属性，可以在用户切换选项卡或最小化窗口时暂停或恢复某些页面活动（如动画或视频播放）等操作，从而优化页面性能和用户体验。在 HTML5 中，文档对象（即 document 对象）具有一个visibilityState属性，该属性表示当前文档对象的可见性状态。因此，可以通过监听这个事件跟踪页面可见性的变化，
小程序app.js中onHide的触发条件
韩瑜的博客
03-04 6764
1
关于HTML5新API————visibilityState
feng
05-25 5131
1、介绍visibilityState 这是一个HTML5新提供的一个api，主要作用就是记录当前标签页在浏览器中的激活状态。所谓“激活状态”指的是当前标签是否正在被用户浏览。 2、应用场景 监控用户行为，当用户的视角不在当前页面时，暂停加载广告，幻灯片、停止加载视频、开始加载小动画等。减少对用户宽带的占用，减少服务器压力，节省用户内存，以及到达更好的播放效果。 3、属性与事件 HTML
vue - 实现类似小程序 onshow() 一样的生命周期钩子方法(监听页面的显示,只要页面
08-04
但是，我们可以通过使用Vue的其他生命周期钩子方法和自定义事件来模拟实现类似的功能。 一种方法是使用Vue的created()生命周期钩子方法来在组件被创建时执行特定的代码。可以在created()方法中注册一个事件监听器，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值