背景:最近作一个倒计时记录学习时长项目,须要在用户点击浏览器的返回按钮或者直接关闭浏览器,或者直接退出微信或者进入后台时记录下当前页面的进度,下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload,在安卓和pc上能够监测到,可是iOS上监测不到ios
解决办法:根据百度相关文档,发现iOS端检测须要用pagehide去检测,因而修改代码以下web
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请求改为同步试试,我抱着试试的态度修改了代码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);