History.pushState 阻止页面浏览器后退功能、window.performance.navigation.type 判断页面刷新方式

一、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
}

【window.performance.navigation】MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigation