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

2024-02-17    分类: 网站建设

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

前提:微信左上角的返回按钮其实无法被拦截,但是可以监听到这个返回事件。
思路:要想真正拦截返回事件,可以当前页面先向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中移除
    }

总结

以上所述是小编给大家介绍的微信浏览器左上角返回按钮拦截功能,希望对大家有所帮助。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司!

当前文章:介绍微信浏览器左上角返回按钮拦截功能
当前URL:https://www.cdcxhl.com/news35/317585.html

成都网站建设公司_创新互联,为您提供网站排名网站改版网站收录域名注册软件开发响应式网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设