支付失败或成功之后的回退问题

走支付流程的话,中间会经过了两层url,所以简单的返回是无法回到商品详情页,会在支付的页面中卡住,然后一直发起支付。给url带上一个参数,监听返回的时候判断是否存在该参数,然后返回一起几层,回到详情页。

1. replaceState  是替换当前的历史信息,可以给当前页面做个标记,或者更新当前页面的URL信息

有三个参数(state,title,url);

  • state:一个与指定历史记录相关联的状态对象,当popstate事件触发时,会把该对象传入回调函数。如果不需要用到,可以传null。

例如  history.replaceState({"goback":goback},"","");当前的 event.state就被赋值 goback

 2. pushState  是新增一条历史记录

当前页面检测到浏览器返回事件的时候,就会检测到 state 中的 goback 值,从而触发回退事件。

支付失败或成功之后的回退问题_第1张图片

if(goback){
    console.log('订单页面带过来的参数goback',goback);
    history.replaceState({"goback":goback},"","");
    history.pushState(null,"","")
    //监听返回键
    window.addEventListener("popstate",pop);
  } 
  function pop(event){
    var state = event.state;
    console.log('state',state);
    if(state){
        //如果存在goback,回退goback层
        window.history.go(-state.goback);
    }
    //没有goback的话,移除监听
    window.removeEventListener('popstate',pop);
  }

 

你可能感兴趣的:(js)