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

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

背景:

最近做一个倒计时记录学习时长项目,需要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件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

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

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

解决微信返回上一页之后,页面不刷新

由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。

nodeJS微信JSDK 配置

微信公众平台申请一个测试公众号;配置nodeJS 使用express框架搭建服务器;使用内网穿透工具(例如:natapp)把本地服务器映射到公网上去;前端使用微信JSDK

解决vue在ios微信“复制链接”始终为初始地址的问题

ios因为微信内置浏览器对 history 的支持不够全面 所以对于开启了 History Mode 的 SPA 应用,只会保存第一条 url 只要每个页面都刷新一次,判断环境为iOS的微信环境时候,使用重定向跳转的方式

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

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

js判断是否在微信或QQ中

之前用网上现成的代码发现有很多浏览器被判别成QQ,像这样: 原因是一些手机浏览器navigator信息中会包含qqbrowser字符,因此被错判为QQ环境

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

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

解决微信H5静默授权获取code以及H5页面历史回退死循环问题

近期在开发H5页面相关需求,需求中有个微信静默授权登录的功能,之前没有接触过这个功能,经过调研官方文档,开发出了初级方案;初级方案可以解决获取code,但是页面返回上一个页面时

微信开发-自定义分享卡片-node.js实现

本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。

套路!陌生美女加微信好友,提出激情裸聊,然后……

一个月黑风高的晚上,你独自刷着朋友圈,突然一个陌生女子要求。添加好友,你第一反应是什么?更要命的是没聊几句话,对方居然要求“裸聊”!

点击更多...

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