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


Posted in Javascript onJanuary 18, 2020

【需求】

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

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

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

【前提】

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

【思路】

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

【实现】

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

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

【相关代码讲解】

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中移除
 }

 【相关补充】

注意:window.addEventListener 添加的事件回调会一直存在,因为 Vue 实例销毁时,window 对象并不会销毁。可以在它的回调里打印,会发现在 two 之外的页面点返回也会进入它的方法。但因为 two 页面内对象数据都已销毁,所以进了此方法也无任何问题。如果不想让其进入,可以用存储一些全局变量加入 if 判断,在 two 页面 destroyed 等相关勾子函数将这个全局变量置成想要状态;或者在全局路由勾子方法中设置相关全局变量也可以。

之前有尝试在 two 的 destroyed 方法内,通过 window.removeEventListener 移除添加的方法,但发现无效果。可能 popstate 是微信内置方法,不能被移除。

【demo地址】

https://github.com/LiJinShi/wechat_back_vue

总结

以上所述是小编给大家介绍的vue实现微信浏览器左上角返回按钮拦截功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 #Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
python生成随机图形验证码详解
2017/11/08 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
python 下载文件的多种方法汇总
2020/11/17 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
毕业生就业协议书
2014/04/11 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
实习单位鉴定评语
2014/04/26 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
教学督导岗位职责
2015/04/10 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python