移动端检测微信浏览器返回,关闭,进入后台操作

更新日期: 2020-04-07阅读量: 2278标签: 微信

背景:

最近做一个倒计时记录学习时长项目,需要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload,在安卓和pc上可以监测到,但是iOS上监测不到


解决办法:

根据百度相关文档,发现iOS端检测需要用pagehide去检测,于是修改代码如下

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isAndroid) {
//这个是安卓操作系统
window.onbeforeunload = function() {
//窗口关闭前
...暂停倒计时并且ajax请求记录到数据
};
} else if (isIOS) {
//这个是ios操作系统
window.addEventListener('pagehide', function() {
...暂停倒计时并且ajax请求记录到数据
});
} else {
//这个pc
window.onbeforeunload = function() {
//窗口关闭前
c...暂停倒计时并且ajax请求记录到数据库
};
}

调试是打断点iOS还是无法监测到,当时郁闷了很长时间,苹果官方文档明明写了用这个能监测到,但是我居然监测不到,一度以为是系统版本低,升级到最新系统发现还是监测不到pagehide,无法记录数据到数据库,最后翻遍百度在一个帖子的不起眼的评论里看到了一句话说把ajax请求改成同步试试,我抱着试试的态度修改了代码

//这个是ios操作系统
window.addEventListener('pagehide', function() {
$.ajaxSetup({
async: false //关闭异步
});
...ajax请求记录数据到数据库
});
window.addEventListener('pageshow', function() {
$.ajaxSetup({
async: true //页面显示时恢复异步
});
});

发布测试居然监测到了,郁闷已久的问题终于解决了,虽然不知道什么原因,但是解决了就是好事

监测浏览器返回、关闭、退出、进入后台完整代码

if (isAndroid) {
//这个是安卓操作系统
window.onbeforeunload = function() {
//窗口关闭前
...ajax操作
};
} else if (isIOS) {
//这个是ios操作系统
window.addEventListener('pagehide', function() {
$.ajaxSetup({
async: false
});
...ajax操作
});
window.addEventListener('pageshow', function() {
$.ajaxSetup({
async: true
});
});
} else {
//这个pc
window.onbeforeunload = function() {
//窗口关闭前
...ajax操作
};
}

//window.onunload = function () {
// //窗口关闭后
...ajax操作
//};
window.addEventListener("popstate", function(e) {
...ajax操作
}, false);
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, function() {
console.log("当前页面是否被隐藏:" + document[hidden]);
if (document[hidden]) { //页面被隐藏,进入后台运行时监测
...ajax操作
}
else {
...页面重新进入前台时操作, 比如恢复倒计时
}
}, false);



站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/8874

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

微信已停止访问该网页解决方法分享

由于微信限制比较严格,域名一不小心就被判定是诱导分享的。所以,公司内部决定调研一套稳定、快速、正确率高的微信域名拦截检测查询接口。开发组尝试谷歌搜索了一段时间,发现很少把源码及原理分享出来的。后来我们摸索了几天

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!