手机网页中JS倒计时在页面里面离开停滞问题
来源:互联网 发布:诺基亚e66软件下载 编辑:程序博客网 时间:2024/06/08 12:17
简介
通常,我们使用各种事件,判断用户是否正在离开当前页面。
- visibilityState
- pageshow
- pagehide
- beforeunload
- unload
但是,手机浏览器往往不会触发这些事件,原因是浏览器进程会被突然关闭或者切换到后台,从而没有机会触发这些事件。常见的场景有以下这些。
- 用户点击了一条系统通知,切换到另一个 App。
- 用户进入任务切换窗口,切换到另一个 App。
- 用户点击了 Home 按钮,切换回主屏幕。
- 操作系统自动切换到另一个 App(比如,收到一个打入的电话)。
上面这些情况,都会导致浏览器进程切换到后台,也很可能会被操作系统自动终止,以便回收资源。 这使得pagehide
、beforeunload
、unload
等事件根本不会触发。
这种情况下面,我们就要使用 Page Visibility API,判断页面是否可见。它可以保证会在手机浏览器得到执行。
// 页面的 visibility 属性可能返回三种状态// prerender,visible 和 hiddenlet pageVisibility = document.visibilityState;// 监听 visibility change 事件document.addEventListener('visibilitychange', function() { // 页面变为不可见时触发 if (document.visibilityState == 'hidden') { ... } // 页面变为可见时触发 if (document.visibilityState == 'visible') { ... }});
其他的用途还包括根据用户行为调整程序。比如,在轮询的情况下,如果页面处于当前窗口,可以每隔15秒向服务器请求数据;如果不处于当前窗口,则每隔几分钟请求一次数据。
实际开发中,为了防止某些浏览器不支持这个 API,最好同时监听pagehide
事件,这样会比较保险。
属性
这个 API 部署在document
对象上,提供以下两个属性。
document.hidden
:返回一个布尔值,表示当前是否被隐藏。document.visibilityState
:表示页面当前的状态,可以取三个值。- visibile:页面可见
- hidden:页面不可见
- prerender:页面即将或正在渲染,不可见
VisibilityChange 事件
页面的可见状态发生变化时,会触发VisibilityChange
事件。
document.addEventListener('visibilitychange', function () { console.log(document.visibilityState);});
阅读全文
0 0
- 手机网页中JS倒计时在页面里面离开停滞问题
- 在网页中能正常显示的页面,在手机端出现问题?
- 页面中加入倒计时关闭网页
- 解决苹果手机里面的网页返回不刷新页面的问题
- 判断离开页面js
- 用JS实现页面中按钮倒计时
- 自定义js对话框等不能"停滞"问题
- 手机上的web页面的倒计时在手机锁屏后再解锁后发现倒计时不准
- JS网页倒计时代码
- js圣诞节倒计时网页
- js倒计时跳转 页面
- js页面倒计时
- js 页面数字倒计时
- 原生js 页面倒计时
- 在jsp页面中关于网页过期问题的解决方案
- js 离开当前页面 提示
- JS 页面离开 提示保存
- jsp网页倒计时跳转页面
- 排序算法学习:快速排序
- 搜索引擎优化关键字研究为买家提供了一个旅程的地图
- 类加载 详解
- springmvc拦截器的定义和配置
- 数组转换
- 手机网页中JS倒计时在页面里面离开停滞问题
- Oracle 通过语句返回指定的字段且是不同值的数目
- JAVA---Linklist与ListIteractor
- 23、C#:窗口的属性和事件详解
- SpringBoot入门之如何启动SpringBoot
- npm install出现UNMET DEPENDENCY错误
- 谷歌卫星地图下载器系统设置参数说明
- thinkphp5 关于加载静态资源路径问题
- awk