监听浏览器的前进和后退按钮

项目需要兼容PC/H5，需要监听浏览器的前进和后退按钮点击并分别处理逻辑

监听popstate

对popstate关键字做监听方法，能够实时拦截用户点击前进按钮和后退按钮的操作，但不能够区分用户到底点击的是前进按钮还是后退按钮

监听popstate

window.addEventListener("popstate", function (evt) {
  callback(evt)
}, false)

pushState推送历史记录

window.history.pushState({}, '页面标题', 'urlpath')

监听前进/后退按钮

为了满足需求，我们需要为每一个pushState的参数添加一个time参数, 每一次(前进/后退)操作对比对time值，并找到历史数据中的对应下标，从而确定用户点击的是前进按钮还是后退按钮

let localHistory = []
let param = {
  id: 'uniqid',
  url: 'uniqurl'
  title: '页面标题',
  time: (new Date()).getTime()
}

window.history.pushState(param, param.title, param.url)
localHistory.push(param)

上述代码分别在window原生history和localHistory存储了一份相同的数据，重复上述操作(多次跳转链接)

let popstateTime = 0

function getHistoryItem(time){
  let index = findHistoryIndex.call({time})  // 从localHistory列表中查找
  let historyIndex = index - 1 // 取当前event.state对应的历史数据的上一条数据
  return findHistoryItem.call(historyIndex)
}

function setPopstateTime(time){
  let historyItem = getHistoryItem(time)
  that.popstateTime = (historyItem && historyItem.time) || popstateTime || 0
}

window.addEventListener("popstate", function (evt) {
  trigger(evt)
}, false)

function trigger(e){
  let state = e.state
  let time = state.time
  if (popstateTime === 0) {  // 第一次一定是后退按钮
    setPopstateTime(e.state.time)
    // redirectBack()
  } else {
    if (e.state.time >= this.popstateTime) {
      // 使前进无效
    } else {
      setPopstateTime(e.state.time)
      // redirectBack()
    }
  }
}

上述DEMO针对后退按钮执行响应方法，并不会响应用户点击前进按钮