IOS微信浏览器返回事件popstate监听
问题描述:
通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微信,是会立即触法popstate事件,导致直接从C页面跳转到A页面,其他的支付宝(安卓、IOS)、微信(安卓)都是可以,就是微信IOS版不行。
经过查找相关资料,选择了一个方法,不过有点弊端,但是并不影响操作,通过popstate、pageshow两个事件进行判断验证。
pageshow:当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在load事件触发后初始化页面时触发)。
也就是说:你点击后退/前进按钮操作都会执行pageshow事件,而且还是先执行pageshow事件,再执行popstate事件。我们就可以通两则的结合进行操作。
代码:
/*** 浏览器回退事件监听*/
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事件,就可以返回到你想要的页面。
调用方式:
1.在需要返回的页面加上如下脚本即可实现返回功能,会返回到 "Home/Index":
<script>$(function () {listenerBackHandler.initBack(); });
</script>
以上只是一个简单的案例,可以根据不同的需求封装通用的组件,如返回到不同的主页,我是在initBack设置多个参数传递,有返回到主页地址、是否关闭平台弹出层(微信:WeixinJSBridge.call('closeWindow'))、平台类型(微信、支付宝),其实这三个参数基本满足所有的需求。
弊端:
就是如果有人手速太快,返回到B页面就立即点击返回按钮,此时出现点击没有反应,再次点击就能返回,给人的感觉好像没有点击到返回按钮,这个概率还是很小的,除非你撸的太多,手速超快,哈哈哈哈。
IOS微信浏览器返回事件popstate监听相关推荐
- popstate android4.3,IOS微信浏览器返回事件popstate监听 会立即执行一次
页面跳转从a->b->b1->c,然后从c返回到b再到a.(监听popstate) IOS版的微信,是会立即触法popstate事件,导致直接从C页面跳转到A页面 解决办法::: v ...
- 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
- IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页 采取方法:采用onpopstate事件监听url改变,从而跳转到主页 遇到的问题:安卓上测试没问题:苹果手机 ...
- iOS小技能:监听H5页面goBack返回事件 网页监听APP返回键 (NavigationBackItemInjection)
文章目录 引言 I . iOS监听H5页面goBack返回事件 1.1 UIWebView 监听H5页面goBack返回事件 1.2 WKWebView监听H5页面goBack返回事件 II. 网页监 ...
- html5 history微信浏览器返回不刷新
History API与浏览器历史堆栈管理: 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现 ...
- html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
- html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
- html5中页面关闭事件监听,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
- esc键退出全屏 vue_解决了VUE在浏览器全屏下监听不到Esc键盘事件
说明: 实测可以在谷歌.火狐.360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题,ESC按键下可以同步 以下是完整的代码, // data() { retu ...
最新文章
- MySQL · myrocks · myrocks统计信息
- linux 安装 tao环境,linux环境安装hbase------不一定需要hadoop
- 如何向妻子解释OOD
- VTK:二次聚类用法实战
- java 设置系统参数_Java如何设置系统参数和运行参数
- 如何把项目改成微服务项目_【日记】148微服务项目第18天
- 【zookeeper】zookeeper 脑裂问题
- 矩池云安装报E: Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporarly unavailable)
- 使用Hystrix实现自动降级与依赖隔离-微服务
- Opencv笔记(二十一)——傅里叶变换
- 力胜机器人_德男子两手臂尺寸悬殊 超粗右臂曾力胜掰手腕机器人
- Linux环境下配置虚拟ip,方法1:新增多个子网卡,每个子网卡有独立的配置文件
- cad详图怎么画_CAD的图框应该怎么画? - CAD自学网
- 用 Web 技术为 Safari 编写扩展
- pandas学习-中期测试
- 漫话:如何给女朋友解释灭霸的指响并不是真随机消灭半数宇宙人口的?
- 上传图片转为base64码再以url形式传值
- processing画坐标系,画函数图像
- 为什么onenote一直在加载_OneNote: 沉睡于电脑中的宝藏笔记软件,高效管理你的学习生活...
- TVS二极管、环流二极管、稳压(齐纳)二极管、肖特基二极管、开关二极管的分类说明