菜单

JS监听微信、支付宝等移动app及浏览器的回到、后退、上一页按键的事件措施

2019年5月5日 - 皇家前端

  贰. 监听蒙层,当它显得时,在window.history(历史酒店)中加多一条记下;

【前提】

微信浏览器左上角重回开关拦截,按键

在微信公众号支付中,有时须求对浏览器左上角重临开关举办阻拦管理相关的页面逻辑,而并不是让页面从来回到上1页,在此之前在那些细节点上的第2手兑现得不是很好。但看来京东购物公众号上的作用却落到实处得卓殊好,所以本人也发轫了那上边的品味。京东的成效如下图:

      图片 1

从上航海用体育场面京东购物效果上来看,在点击寻觅拉起叁个查究分界面,然后点击左上角反回,只是将追寻界面收起,而页面没有再一次像读取进程条同样去重返,而自己页面须求的正是这么的功能,上面就用vue来做1个那些历程的demo吧。

 

前提:微信左上角的回来按键其实不能够被挡住,然而能够监听到那几个再次来到事件。

思路:要想的确拦截重返事件,能够当前页面先向window.history中增加三个记下(实际只是在历史记录货仓中加多一条记录pushState,浏览器并不会真正去加载这么些门路),当点击再次回到时,监听到重临事件处理自身想管理的逻辑,反正微信它是任其自流要施行回来,刚增添的那条记下就能够从window.history拿出并将此路线替换当前页面路线。注意:这里只是路径的替换,只是将路线换了个名字,并不是会真正去加载那一个渠道。

 

完成:demo里建设构造了七个vue页面(first 和
two),第二个页面跳转到到第二个页面。然后在其次个页面弹出三个蒙层,那时点击左上角重回时,并不是重回first,而是先将蒙层消失,再度点击重回时才是回去上一页;

落到实处际效果益如下:

      图片 2

连锁代码批注:

一在第三个页面mounted方法中进入,增多监听重返事件措施。当重返按键被点击时,这里让弹出的蒙层隐藏;

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

贰 监听蒙层,当它展现时,在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:

在微信公众号支付中,有时需求对浏览器左上角再次回到开关实行阻挠管理有关的页面逻辑,而并不是让…

下边是1体化的代码:

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

  在此以前有品味在 two 的 destroyed
方法内,通过 window.remove伊芙ntListener
移除增多的措施,但意识无效果。也许 popstate 是微信内置方法,无法被移除。

在其实的施用中,大家平时须求贯彻在移动app和浏览器中式点心击重回、后退、上壹页等按键达成本人的闭馆页面、调节到内定页面或实行一些其余操作的供给,那在代码中什么监听当点击微信、支付宝、百度江米、百度钱袋等app的归来按键或许浏览器的上壹页或后退开关的风浪吧。

【实现】

 

回去、后退、上壹页开关点击监听完毕代码:

  一. 在其次个页面 mounted
方法中参预,增多监听再次回到事件措施。当重回按键被点击时,这里让弹出的蒙层隐藏;

  在微信公众号支付中,有时供给对浏览器左上角重回开关进行阻拦处理有关的页面逻辑,而并不是让页面一贯重临上1页,以前在那一个细节点上的直白贯彻得不是很好。但看看京东购物公众号上的效劳却落实得可怜好,所以自身也开头了那上边的品味。京东的成效如下图:

当进入该页面,大家就给这么些history压入3个地点的连年。当点击重返、后退及上1页的操作时,就进展监听,在监听代码中落实团结操作。

    helloClick() { // 点击弹出来的hello蒙板
      this.isShowTestDiv = false;
      this.$router.back(); // 将添加记录从history中移除
    }
    helloClick() { // 点击弹出来的hello蒙板
      this.isShowTestDiv = false;
      this.$router.back(); // 将添加记录从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);
    },
  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);
    },

本人相信广大恋人像自家同样,在百度、搜狗里面搜索很久都没找到办法。

【demo地址】

    图片 3

您或许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图