如何检测用户是否通过返回按钮进入了一个页面？
如何检测用户是否通过返回按钮进入了一个页面？
这个问题与追踪用户点击浏览器返回按钮类似，但不完全相同...我有一个解决方案，并在这里发布以供参考和反馈。如果有更好的选择，我愿意倾听！\n情况是我有一个带有“即时编辑”的页面，类似于flickr。也就是说，有一个“点击此处添加描述”的DIV，当点击时，它会变成带有保存和取消按钮的TEXTAREA。点击保存将数据发送到服务器以更新数据库，并将新描述放入DIV中取代TEXTAREA。如果刷新页面，新的描述将从数据库显示，并提供“点击以编辑”选项。这是现在相当常见的Web 2.0技术。\n问题是，如果：\n
- \n
- 页面加载时没有描述
- 用户添加了描述
- 通过点击链接离开页面
- 用户点击返回按钮
\n
\n
\n
\n
\n那么显示的是没有动态修改的包含新描述的DIV的页面版本（来自浏览器的缓存）。\n这是一个相当大的问题，因为用户会认为他们的更新已丢失，并且不一定会理解他们需要刷新页面才能看到更改。\n所以，问题是：在页面加载后如何将页面标记为已修改，并在用户“返回”时检测到并强制刷新页面？
如何检测用户是否使用了返回按钮进入页面？
当用户点击浏览器的返回按钮返回到之前浏览过的页面时，我们可能希望在页面加载时执行一些特定的操作。下面的代码演示了如何使用JavaScript检测用户是否使用了返回按钮进入页面。
点击访问WebKit
上述代码中，当页面加载时，会添加两个事件监听器，分别监听`pageshow`和`pagehide`事件。当用户使用返回按钮进入页面时，`pageshow`事件处理程序会被调用，并显示一条相关提示。当用户离开页面时，`pagehide`事件处理程序会被调用，并显示另一条相关提示。
需要注意的是，需要在支持这些事件的浏览器中使用。根据caniuse.com/#feat=page-transition-events的数据显示，目前大约有88%的全球浏览器支持这些事件。但需要注意的是，最新的Chrome和Firefox浏览器支持这些事件，而IE11不支持。
另外需要注意的是，Chrome浏览器在返回按钮被点击时返回的`event.persisted`的值为`false`，即使是通过返回按钮进入的页面。如果需要在Chrome浏览器中检测用户是否使用了返回按钮进入页面，可以使用`window.performance.navigation`或`PerformanceNavigationTiming`来代替`event.persisted`。
如何检测用户是否使用返回按钮进入页面？
这是一个古老问题的一个非常简单的现代解决方案。
if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
alert('用户通过浏览器的“后退”或“前进”按钮进入此页面。');
}
`window.performance` 目前由所有主要浏览器支持。
我之前没有听说过这个。我刚刚在这里找到了这个文档（developer.mozilla.org/en-US/docs/Web/API/Performance/navigation），我很想听听你解释一下（例如为什么需要 `window.performance && window.performance.navigation.type` 而不只是 `window.performance.navigation.TYPE_BACK_FORWARD`？）。
`window.performance.navigation.TYPE_BACK_FORWARD` 是一个常量，始终等于 2。因此它只是用于比较。
Performance.navigation 在除 Android 和 Opera Mini 之外的所有设备上都受支持，但没有问题，非常好（developer.mozilla.org/en-US/docs/Web/API/Performance/navigation）。
看起来 `performance.navigation` 已被弃用，建议使用 `developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type`。
这将在 Safari 上导致脚本崩溃 - 包括 Mac 和移动设备。
Firefox v70 将支持将 `performance.navigation` 设置为 `2`，表示返回按钮点击。在 v70 之前，它错误地返回 `1`。
不幸的是，这已经被弃用了：developer.mozilla.org/en-US/docs/Web/API/Performance/navigation。
这里有其他答案改进了这个不推荐使用的方法。
`performance.getEntriesByType("navigation")[0].type` 在 Chrome 上不起作用。
在 Chrome 上工作，但在 Safari 上不起作用。
文章整理：
如何检测用户是否使用返回按钮进入页面？这是一个古老问题的一个非常简单的现代解决方案。`window.performance` 目前由所有主要浏览器支持。`window.performance.navigation.TYPE_BACK_FORWARD` 是一个常量，始终等于 2。因此它只是用于比较。Performance.navigation 在除 Android 和 Opera Mini 之外的所有设备上都受支持，但没有问题，非常好。`performance.navigation` 已被弃用，建议使用 `developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type`。这将在 Safari 上导致脚本崩溃 - 包括 Mac 和移动设备。Firefox v70 将支持将 `performance.navigation` 设置为 `2`，表示返回按钮点击。在 v70 之前，它错误地返回 `1`。不幸的是，这已经被弃用了。这里有其他答案改进了这个不推荐使用的方法。`performance.getEntriesByType("navigation")[0].type` 在 Chrome 上不起作用，工作在 Chrome 上，但在 Safari 上不起作用。
如何检测用户是否使用返回按钮到达页面？
有时候我们需要检测用户是否通过返回按钮返回到了某个页面。下面的方法可以帮助我们实现这个功能。
首先在页面中添加一个隐藏的表单。表单数据在大多数浏览器中会在重新加载或通过返回按钮返回页面时保留。以下是代码示例：
<form name="ignore_me">
<input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>
然后在JavaScript中添加以下代码：
var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
dirty_bit.value = '1';
}
需要注意的是，检测表单的JavaScript代码必须在HTML完全解析后执行。如果用户的响应时间非常重要，可以将表单和JavaScript代码都内联放置在页面顶部（JavaScript代码放在表单之后）。
需要注意的是，"表单数据在大多数浏览器中会被保留"这句话，你能详细解释一下吗？在某些浏览器或某些情况下会有什么问题吗？
实际上，我来列举一下我能想到的可能出错的情况。(1) Opera会保留页面的完整状态，并且不会重新执行JavaScript代码。(2) 如果缓存设置被调整为强制从服务器加载页面，那么表单数据可能会丢失，但对于这个问题来说，这是可以接受的。(3) 手机浏览器的缓存空间更小，浏览器可能已经将页面从缓存中删除（对于这个问题来说不是问题）。
在某些浏览器中，隐藏标签可能不会被保留。因此，我们可以使用隐藏的文本标签来替代隐藏的输入标签。以下是代码示例：
<input type="text" value="0" id='txt' name='txt' style="display: none" />
这个方法对我来说非常有效。我相信它也有可能出现一些问题，但对于这个问题来说，每个解决方案都可能存在问题。
在iPhone的Safari浏览器上不起作用，请尝试一下，当你点击返回按钮时，JavaScript代码不会再次执行。
需要注意的是，如果没有设置name属性，这个方法似乎不起作用。
据我所知，如果使用HTTPS，这个方法不起作用。虽然可以通过在表单上使用'autocomplete'属性来解决，但我认为这是一个不好的方法。
需要注意的是，这段代码可能会导致无限循环！至少在Firefox浏览器中是这样的。因为重新加载后，隐藏输入的值仍然等于1。Bassem的解决方案似乎是唯一一个真正有效的方法。
在现代浏览器中可能无法正常工作。某些浏览器不会保留隐藏的输入标签。