微信浏览器左上角返回按钮拦截功能


Posted in HTML / CSS onNovember 21, 2017

在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好,所以自己也开始了这方面的尝试。京东的效果如下图:

微信浏览器左上角返回按钮拦截功能

从上图京东购物效果上来看,在点击搜索拉起一个搜索界面,然后点击左上角反回,只是将搜索界面收起,而页面没有重新像读取进度条一样去返回,而我页面需要的正是这样的效果,下面就用vue来做一个这个过程的demo吧。

前提:微信左上角的返回按钮其实无法被拦截,但是可以监听到这个返回事件。

思路:要想真正拦截返回事件,可以当前页面先向window.history中添加一个记录(实际只是在历史记录堆栈中添加一条记录pushState,浏览器并不会真正去加载这个路径),当点击返回时,监听到返回事件处理自己想处理的逻辑,反正微信它是一定要执行返回,刚添加的那条记录就会从window.history拿出并将此路径替换当前页面路径。注意:这里只是路径的替换,只是将路径换了个名字,并不是会真正去加载这个路径。

实现:demo里建立了两个vue页面(first 和 two),第一个页面跳转到到第二个页面。然后在第二个页面弹出一个蒙层,这时点击左上角返回时,并不是返回first,而是先将蒙层消失,再次点击返回时才是返回上一页;

实现效果如下:

微信浏览器左上角返回按钮拦截功能

 
 

相关代码讲解:

1 在第二个页面mounted方法中加入,添加监听返回事件方法。当返回按钮被点击时,这里让弹出的蒙层隐藏;

mounted() {
    let that = this;
    // 添加返回事件监听
    window.addEventListener("popstate", function(e) {
      that.isShowTestDiv = false;
    }, false);
  },

2 监听蒙层,当它显示时,在window.history(历史堆栈)中添加一条记录;

watch: {
    isShowTestDiv: function(newVal, oldVal) {
      if (newVal === true) {
        this.pushHistory();
      }
    }
  }
    pushHistory() { // 修改history
      var state = {
        title: "",
        url: "/two" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
      };
      window.history.pushState(state, state.title, state.url);
    },

3 最后弹出的蒙层如果用户点蒙层上相关操作将蒙层关闭,那么要手动将自己添加的那条记录从history中移除,在vue将路由back一下即可。

helloClick() { // 点击弹出来的hello蒙板
      this.isShowTestDiv = false;
      this.$router.back(); // 将添加记录从history中移除
    }

    demo地址

gitHub: https://github.com/LiJinShi/wechat_back_vue

总结

以上所述是小编给大家介绍的微信浏览器左上角返回按钮拦截功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 #HTML / CSS
详解HTML5新增标签
Nov 27 #HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 #HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 #HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 #HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 #HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 #HTML / CSS
You might like
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
javascript常用功能汇总
2015/07/05 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python学习入门细节知识点
2018/03/29 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
什么是python类属性
2020/06/10 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
培训心得体会
2013/12/29 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
幼儿园六一主持词
2015/06/30 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android