微信问题总结(onpageshow ,popstate事件)

此坑描述

订单详情某按钮点击,通过window.location.href跳转到(外部)第三方链接后,回退后,在ios中生命周期和路由导航钩子都失效了,无法触发。 在安卓中无视此坑, 回退没有问题

解决

原因:根据强大的度娘,大概了解此问题可能是因为缓存造成的,所以页面生命钩子,路由钩子没有触发

方案:onpageshow事件。 在用户浏览网页时触发 onpageshow 事件类似onload事件;

onload 事件在页面第一次加载时触发;onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发;

created () { 
 window.addEventListener('pageshow', () => { 
 //回退到vue应用执行的操作
 }) 
}

例子

注:组件销毁时最好销毁pageShow事件,避免消耗

  created() {
    //处理跳转外部链接后,ios回退标题不改变问题
    if (this.$store.state.isIOS) {
      window.addEventListener('pageshow', this.setNav)
    }
  },
 beforeDestroy(){
    if (this.$store.state.isIOS) {
      window.removeEventListener('pageshow', this.setNav)
    }
  },
  methods:{
     // 设置标题
    setNav(){
      console.log('aaaaaaa----');
      window.$native.setNavTitle('订单详情', '', '')
      console.log('bbbbbbbbbbb');
    },
   
  }

禁止用户返回

  const popstate = () =>{ // 禁止ios 返回事件
    // if (isIOS()) {
      window.history.pushState(null, null, document.URL);
      window.addEventListener("popstate", function(e) {
      window.history.pushState(null, null, document.URL);
     })
    // }
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值