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


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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php计算函数执行时间的方法
2015/03/20 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
Prototype源码浅析 Number部分
2012/01/16 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
浅谈python numpy中nonzero()的用法
2018/04/02 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
override和overload的区别
2016/03/09 面试题
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
优秀实习生感言
2014/03/01 职场文书
小学生家长寄语
2014/04/02 职场文书
网络编辑求职信
2014/04/30 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
学生检讨书如何写
2014/10/30 职场文书
学校工会工作总结2015
2015/05/19 职场文书
实践论读书笔记
2015/06/29 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python