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

业务需求：从主页进入A订单页面，然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页
采取方法：采用onpopstate事件监听url改变，从而跳转到主页
遇到的问题：安卓上测试没问题；苹果手机微信里进入A页面直接触发onpopstate返回主页，造成类似闪退现象，给popstate监听事件addEventListener加延时后问题依旧，设置flag标志使popstate事件里的跳转函数加延时问题解决，但是只是解决了从主页跳转到A页面的问题，A订单页面点订单跳转到订单详情B页面，从B页面返回A页面时出现了问题，直接触发popstate的回调函数跳转到了主页，而没有留在A页面。目前只有IOS上的微信出现这个问题了，怎么解决？

在实际的应用中，我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的
需求，那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。我相信很多朋友像我一样，在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法：首先我们要了解浏览器的history。大家知道在页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改
history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件
监测，那么我们就可以进行监听。返回、后退、上一页按钮点击监听实现代码：window.addEventListener("popstate", function(e) {  alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  }, false);  虽然我们监听到了后退事件，但是页面还是会返回上一个页面，所以我们需要使用pushState增加一个本页的url,代表本页，大家都非常清楚是#function pushHistory() {  var state = {  title: "title",  url: "#"  };  window.history.pushState(state, "title", "#");  }  当进入该页面，我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时，就进行监听，在监听代码中实现自己操作。
下面是完整的代码：
//匿名函数
$(function(){getHistory();var flag=false;
setTimeout(function(){flag=true
},1000)window.addEventListener('popstate',function(e){//监听到返回事件if(flag){//自己想要做的事情}getHistory();
},false);
function getHistory(){var state={title:'',url:'//可写返回事件的跳转路径'
} ;
window.history.pushState(state,'title',url);
}
})

IOS微信浏览器返回事件监听问题相关推荐

IOS微信浏览器返回事件popstate监听
问题描述: 通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微 ...
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 ...
html5 history微信浏览器返回不刷新
History API与浏览器历史堆栈管理: 移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现 ...
Fragment页面的返回按钮监听
一.首先启用Fragment的返回事件监听. requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner, obj ...
微信H5如何关闭浏览器（如何监听手机的物理返回键）
一.背景背景是这样的:该项目进入h5时会通过 location.replace(xxx) 或 location.href = xxx 跳转到某个地址①,该地址会请求获得微信 openId:获取成功后 ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
监听返回app_基于 Redis 消息队列实现 Laravel 事件监听及底层源码探究
在 Laravel 中,除了使用 dispatch 辅助函数通过 Illuminate\Bus\Dispatcher 显式推送队列任务外,还可以通过事件监听的方式隐式进行队列任务推送,在这个场景下,事 ...
微信公众号获取事件监听
微信公众号获取事件监听使用到的工具类 XML (MessageUtil) 实体类(TextMessage) /*** 验证消息来自于服务器** @param signature* @param ti ...

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

IOS微信浏览器返回事件监听问题相关推荐

最新文章

热门文章