关于javascript:监听浏览器的前进和后退按钮

我的项目须要兼容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针对后退按钮执行响应办法，并不会响应用户点击后退按钮