一、History.pushState() 需要阻止浏览器的后退按钮,移动端的后退手势。
History API
在 HTML 文档中,history.pushState() 方法向当前浏览器
会话的历史堆栈
中添加一个状态(state)。
window.history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
window.history.pushState(null, null, document.URL);
});
【History.pushState()】 MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
二、判断页面刷新 window.performance.navigation.type
- TYPE_NAVIGATE (0) 当前页面是通过
点击链接
,书签和表单提交
,或者脚本操作
,或者在url中直接输入地址
,type值为0- TYPE_RELOAD (1)
点击刷新页面按钮
或者通过Location.reload()
方法显示的页面,type值为1
The page was accessed by clicking the Reload button or via the Location.reload() method.- TYPE_BACK_FORWARD (2) 页面通过
历史记录
和前进后退
访问时。type值为2- TYPE_RESERVED (255) 任何
其他方式
,type值为255
fn(){
const type = window.performance.navigation.type; // => PerformanceNavigation 对象
console.log(`type`, type)
// 0 当前页面是通过点击链接,书签和表单提交,或者脚本操作,或者在url中直接输入地址,type值为0
// 1 点击刷新页面按钮或者通过Location.reload()方法显示的页面,type值为1
// 2 页面通过历史记录和前进后退访问时。type值为2
// 3 任何其他方式,type值为255
}