使用 JavaScript 检测硬重新加载答案

【问题标题】：Detect a hard reload with JavaScript使用 JavaScript 检测硬重新加载
【发布时间】：2019-05-31 02:22:16
【问题描述】：

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

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

我知道可以检测到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)）。

【问题讨论】：

您是否考虑关闭浏览器并重新打开它就像刷新页面一样？
你想达到什么目的？最终你真的不知道浏览器在做什么。
如果服务器在获取页面时将哈希码设置为 cookie，则 JS 会根据本地存储检查此哈希码。如果它们不匹配，则加载它，但如果它们匹配，则将其缓存。即使您使用 HTTP 标头缓存，这也有效。
@cgTag 这对我来说也是最可行的解决方案
@MosèRaguzzini 是的，这是伪装成客户端问题的服务器问题。这个网站上被问过很多次，但人们一直想用 JavaScript 解决这个问题。这与服务器程序员希望通过查看访问者的 IP 地址来了解访问者所在时区的情况相同，但这是客户端问题。

标签： javascript browser reload

【解决方案1】：

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

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

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

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

【讨论】：

在某些浏览器中是PerformanceNavigationTiming API。
Safari 和 Safari 移动版根本不支持它，唯一考虑的类型是“导航”、“重新加载”、“后退”或“预渲染”。
是的，我同意，这只是一种新工具，可以让页面了解有关其加载方式的某事。我个人不确定普通应用程序会如何处理这些信息。
“Safari 和 Safari 移动版根本不支持它”，但它们支持 PerformanceNavigation。请参阅developer.mozilla.org/en-US/docs/Web/API/Performance/navigation 或自行测试console.log('Is reloading?', window.performance.navigation.type === 1);。因此，“它不知道自己或页面是如何到达那里的”并不完全正确。
@FLekschas 无法确定是刷新还是硬刷新。所以你不知道你是如何到达那里的。这是事实。