1. 业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页
  2. 采取方法:采用onpopstate事件监听url改变,从而跳转到主页
  3. 遇到的问题:安卓上测试没问题;苹果手机微信里进入A页面直接触发onpopstate返回主页,造成类似闪退现象,
    popstate监听事件addEventListener加延时后问题依旧,设置flag标志使popstate事件里的跳转函数加延时问题解决,
    但是只是解决了从主页跳转到A页面的问题,A订单页面点订单跳转到订单详情B页面,从B页面返回A页面时出现了问题,
    直接触发popstate的回调函数跳转到了主页,而没有留在A页面。目前只有IOS上的微信出现这个问题了,怎么解决?
  1. 在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面或执行一些其它操作的
  2. 需求,那在代码中怎样监听当点击微信、支付宝、百度糯米、百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢。
  3.  
  4. 我相信很多朋友像我一样,在百度、搜狗里面搜索很久都没找到方法。下面就来告诉大家怎样监听的方法:
  5.  
  6. 首先我们要了解浏览器的history。大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安全原因javascript不允许修改
  7. history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。既然有提供popstate事件
  8. 监测,那么我们就可以进行监听。
  9.  
  10. 返回、后退、上一页按钮点击监听实现代码:
  11.  
  12. window.addEventListener("popstate", function(e) {
  13. alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
  14. }, false);
  15.  
  16. 虽然我们监听到了后退事件,但是页面还是会返回上一个页面,所以我们需要使用pushState增加一个本页的url,代表本页,大家都非常清楚是#
  17.  
  18. function pushHistory() {
  19. var state = {
  20. title: "title",
  21. url: "#"
  22. };
  23. window.history.pushState(state, "title", "#");
  24. }
  25.  
  26. 当进入该页面,我们就给这个history压入一个本地的连接。当点击返回、后退及上一页的操作时,就进行监听,在监听代码中实现自己操作。
  27. 下面是完整的代码:
  28. //匿名函数
  29. $(function(){
  30. getHistory();
  31. var flag=false;
  32. setTimeout(function(){
  33. flag=true
  34. },1000)
  35. window.addEventListener('popstate',function(e){
  36. //监听到返回事件
  37. if(flag){
  38. //自己想要做的事情
  39. }
  40. getHistory();
  41. },false);
  42. function getHistory(){
  43. var state={
  44. title:'',
  45. url:'//可写返回事件的跳转路径'
  46. } ;
  47. window.history.pushState(state,'title',url);
  48. }
  49. })

IOS微信浏览器返回事件监听问题的更多相关文章

  1. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  2. ios微信浏览器click事件不起作用的解决方法

    $(document).on( "click", ".weui_cell", function (event) {alert(); }); JS代码是这样的,h ...

  3. 监听微信端,手机端,ios端的浏览器返回事件,pc端关闭事件

    直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实 ...

  4. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  5. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  6. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  8. ios 上浏览器返回上一页不会刷新页面问题,页面初始化的方法不执行

    https://blog.csdn.net/yang450712123/article/details/79276102 https://blog.csdn.net/Chengbin_Huang/ar ...

  9. 改进:js修改iOS微信浏览器的title

    问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...

随机推荐

  1. 范仁义html+css课程---2、html常用标签

    范仁义html+css课程---2.html常用标签 一.总结 一句话总结: html常用的标签有 标题标签.div.span.p.hr.br标签 等 1.html中的标题标签有哪些? <h1& ...

  2. redis-cli 使用密码登录

    #./redis-cli 输入auth +空格+ 刚才设置的密码 成功

  3. mysql起容器的最精简命令

    亲测有效的 mysql 容器命令: #pull mysql:5.6 docker pull mysql:5.6 #起容器,映射3306端口,配置root用户密码 docker run -di --na ...

  4. C#nameof用法

    1.实现代码 using System; namespace NameofUsage { /// <summary> /// C# nameof用法 /// </summary> ...

  5. 如何禁用Chrome浏览器的Flash

    使用Chrome浏览器时,经常会因为Flash而导致CPU占用过多,系统变慢.如果你常访问的网站很少用到的Flash或者页面上的Flash不是网站的核心功能,那么建议禁用Flash.禁用Flash的步 ...

  6. 006-多线程-JUC线程池-并发测试程序

    一.java代码模拟并发 1.1.一次并发 单次并发测试 1.使用CountDownLatch 等待一个或多个线程一起执行 详细参看:007-多线程-锁-JUC锁-CountDownLatch-闭锁[ ...

  7. 将C++资源文件读取出来

    HRSRC   hResource   =   FindResource(GetModuleHandle(NULL),     MAKEINTRESOURCE(IDR_CALC),   TEXT(&q ...

  8. Django 将APP存储至统一目录

    项目根目录下创建apps目录 mkdir apps 将应用移动到apps目录下 这里取消  search for references   ,open moved files in edito 选择 ...

  9. PAT 甲级 1068 Find More Coins (30 分) (dp,01背包问题记录最佳选择方案)***

    1068 Find More Coins (30 分)   Eva loves to collect coins from all over the universe, including some ...

  10. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...