时间戳

首页 > 解决方案 > 使用 JavaScript 检测硬重新加载

javascript - 使用 JavaScript 检测硬重新加载

问题描述

澄清一下：我不想区分刷新和重新加载，因此这不是refresh vs reload的重复。我试图找出是否有办法检测用户何时触发硬重新加载而不是正常重新加载。我问是因为我只想在硬重新加载之前执行一些代码。

使用 JavaScript，通过浏览器的重新加载按钮，或通过 ++ 之类的快捷方式Shift，Ctrl可以R执行浏览器选项卡的硬重新加载。是否可以使用 JavaScript检测到这样的硬重新加载，如果可以，如何检测？

我知道可以检测到事件何时触发了正常的重新加载事件，onbeforeunload并且我可以找出导航类型以区分刷新和重新加载，但我无法检测到硬重新加载。

到目前为止，我正在使用以下 JS 代码来检测重新加载：

window.addEventListener('beforeunload', function (e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';

  // For older browsers
  console.log('Is reloading?', event.currentTarget.performance.navigation.type === 1);

  // For modern browsers
  const perfEntries = performance.getEntriesByType("navigation");

  for (let i = 0; i < perfEntries.length; i++) {
    console.log('Is reloading? ', perfEntries[i].type === 1);
  }
});

我希望能够区分正常重新加载，例如，location.reload()和强制重新加载，例如，location.reload(true)。

标签： javascriptbrowserreload

解决方案

您无法在 javascript 中检测到硬刷新，因为无法访问当前加载页面的标题。

J avaScript 的问题在于它没有 304 的概念。它开始在网页的上下文中执行，但它不知道自己或页面是如何到达那里的。

但是，服务器可以从请求标头中判断这是否是硬刷新，因此可以选择合作。例如，服务器可以<meta>在响应中包含自定义标记或添加特殊类，<body>然后您的脚本将可以访问此信息。

另一种选择是拦截基于浏览器/操作系统的组合键并在触发硬刷新之前采取行动（将某些内容附加到 url，设置 cookie 或本地/会话存储属性）

推荐阅读