点击回退，拦截并弹窗 react 挽留弹窗

现在越来越多的页面，加上了挽留弹窗，让你再想想或者是再推荐点啥

用到的就是 popstate

 

当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

 

他的属性使我们正好用于监听浏览器回退行为，话不多说放代码

componentDidMount() {
    // 检测返回
    window.current_url = document.URL //保留当前页面地址
    window.addEventListener('popstate', this.window_back) //监听popstate，检测到变化时，执行window_back
}

componentWillUnmount() {
    window.removeEventListener('popstate', this.window_back)//离开页面时，清除监听
    ...//在这里可以清除弹窗出来时，种下的cookie或者是session或者是存在store里的值，自选
}

window_back() {
    const acookie = utils.store.session_get('acookie')//这里获取弹窗时种下的cookie
    
    const hash = window.location.hash //获取的是目标页地址，就是浏览器返回要跳到的页面地址，或者是前进要去的地址，不是当前页面地址
    const path = hash.replace(/\/$|\/?\?.*$/g, '') //获取目标页的hash

    //这里可以用来判断当前页可能前进到的目标页地址，拦截住
    if (path === '#/aaa/cc' || path === '#/aaa/bb' || path === '#/aaa/cc') {
      return
    }

    //如果想控制回退到的页面，在这里拦截并且push一个新的链接，这样点击回退就不会回退到正常回退会到的页面了
    if(path === '#/aaa/dd' && success_back_c[1]){
      this.props.history.push('/aaa/ee')
    }
    //这里，如果想弹窗只弹一次，就判断cookie里有没有值，有的话就return，代表已经弹过一次了，
    if (acookie[1]) {
      return
    }
    //没有的话，在这里种上cookie
    acookie[1] = 1
    utils.store.session_set('acookie', acookie)
    ...//这里可以弹窗了
    window.history.pushState(null, null, window.current_url )//这句是关键，当弹窗的时候，把要跳转的页面替换为当前页面，这样看起来就没有回退
    
    
}