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

4次阅读

共计 1249 个字符，预计需要花费 4 分钟才能阅读完成。

我的项目须要兼容 PC/H5，须要监听浏览器的后退和后退按钮点击并别离解决逻辑

对 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 针对后退按钮执行响应办法，并不会响应用户点击后退按钮

正文完