文档章节

IOS微信浏览器返回事件popstate监听

o
 osc_odyg6b92
发布于 2018/07/13 14:47
字数 775
阅读 40
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

问题:

通过监听 popstate 事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微信,是会立即触发popstate事件,导致直接从C页面跳转到A页面,其他的支付宝(安卓、IOS)、微信(安卓)都是可以,就是微信IOS版不行。

经过查找相关资料,选择了一个方法,不过有点弊端,但是并不影响操作,通过popstate、pageshow两个事件进行判断验证。

/** 
 * 浏览器回退事件监听 
 */  
var listenerBackHandler = {  
    param: {  
        isRun: false, //防止微信返回立即执行popstate事件  
    },  
    listenerBack: function () {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  

        window.addEventListener("popstate", function (e) {  
            if (listenerBackHandler.param.isRun) {  
                    window.location.href = "Home/Index"; //返回到主页  
                }  
            }  
        }, false);  
    },  
    //初始化返回事件  
    initBack: function () {  
        window.addEventListener('pageshow', function () {  
            listenerBackHandler.param.isRun = false;  
            setTimeout(function () { listenerBackHandler.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
            listenerBackHandler.listenerBack();  
        });  
    }  
}  

 

 

原理: 
因为在IOS微信浏览器里,返回上一个页面时,必定会触法popstate事件,就会导致立即执行返回到A页面。通过pageshow事件先延迟1秒的事件,让执行popstate事件时无法返回,等定时器把isRun的值改成true,然后再点击返回按钮,就会再次执行popstate事件,就可以返回到你想要的页面。

弊端: 
就是如果有人手速太快,返回到B页面就立即点击返回按钮,此时出现点击没有反应,再次点击就能返回,给人的感觉好像没有点击到返回按钮,这个概率还是很小。

 

 

附属资料:(下面是W3Chool对popstate的描述)

每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。

需要注意的是,仅仅调用pushState方法或replaceState方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用JavaScript调用backforwardgo方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。

使用的时候,可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象,它的state属性指向pushStatereplaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)。

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

 

上面代码中的event.state,就是通过pushStatereplaceState方法,为当前URL绑定的state对象。

这个state对象也可以直接通过history对象读取。

var currentState = history.state;

 

注意,页面第一次加载的时候,在load事件发生后,Chrome和Safari浏览器(Webkit核心)会触发popstate事件,而Firefox和IE浏览器不会。

 

 

 

 

 

 

转载自:https://blog.csdn.net/sinat_37138973/article/details/79098763

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.1K
1
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.7K
1
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.4K
1
iOS 应用版本更新检查--Harpy

实现 app 版本检查功能。用户打开app之后,进行app的版本更新检查。如果检查到 appstore 上有当前qpp的新版本,则弹出对话框提醒用户下载。可以设置让用户选择下载或者强制用户下载。 [Code4...

匿名
2013/02/18
1.7K
0
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

Vim清除最后一个搜索突出显示 - Vim clear last search highlighting

问题: Want to improve this post? 想要改善这篇文章吗? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. 提供此问题......

技术盛宴
59分钟前
23
0
原子属性和非原子属性有什么区别? - What's the difference between the atomic and nonatomic attributes?

问题: What do atomic and nonatomic mean in property declarations? 属性声明中atomic和nonatomic是什么意思? @property(nonatomic, retain) UITextField *userName;@property(atomic, ......

fyin1314
今天
7
0
马化腾每天刷 Leetcode?代码你打算写到几岁?

本文作者:o****0 前几天,一张未证真伪的截图流传,图中显示马化腾几乎每天都会在 Leetcode 上提交代码。 截图还贴出一个 Leetcode 账户地址。该地址的头像已从马化腾的照片换成腾讯 logo,...

百度开发者中心
前天
13
0
滴滴 3000+ Kylin Cube 背后的实践经验揭秘

本次分享主要有三个部分:Kylin 在滴滴的整体应用、架构的实践经验、滴滴全局字典最新版本的实现以及 Kylin 最新实时 OLAP 探索经验分享。 Kylin 在滴滴的应用&架构 Kylin 在滴滴的三类应用场...

浪尖聊大数据
昨天
9
0
ssh“权限太开放”错误 - ssh “permissions are too open” error

问题: I had a problem with my mac where I couldn't save any kind of file on the disk anymore. 我的Mac出现问题,无法再在磁盘上保存任何类型的文件。 I had to reboot OSX lion and r......

javail
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部