共计 1249 个字符,预计需要花费 4 分钟才能阅读完成。
我的项目须要兼容 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 针对后退按钮执行响应办法,并不会响应用户点击后退按钮
正文完
发表至: javascript
2020-09-16