如何检测用户是否已使用“后退”按钮转到页面？
这个问题类似于Track when user hits back button on the browser，但不一样……我有一个解决方案，并将其张贴在这里供参考和反馈。如果有人有更好的选择，我洗耳恭听！
情况是，我有一个“就地编辑”的页面，一个la flickr。也就是说，有一个“点击此处添加描述”DIV，当点击时，它会变成一个带有保存和取消按钮的TEXTAREA。单击Save将数据发送到服务器以更新数据库，并在DIV中替换TEXTAREA中的新描述。如果刷新页面，则会显示数据库中的新描述，并带有“单击以进行编辑”选项。如今相当标准的web2.0的东西。
问题是，如果：
- 页面加载时没有说明
- 用户添加了说明
- 通过单击链接
- 用户单击后退按钮
<
- >G210>将页面导航离开
那么(从浏览器的缓存中)显示的是页面的版本，没有包含新描述的动态修改的DIV。
这是一个相当大的问题，因为用户假设他们的更新已经丢失，并且不一定理解他们需要刷新页面才能看到更改。
因此，问题是:如何在页面加载后将其标记为正在修改，然后检测用户何时“返回”并在这种情况下强制刷新？
回答 11
Stack Overflow用户
发布于 2011-04-13 06:59:00
使用隐藏表单。当您重新加载或单击“后退”按钮返回页面时，表单数据(通常)会保留在浏览器中。下面是你的页面(可能在底部附近)：
<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';
}嗅探表单的js必须在html完全解析后执行，但是如果用户延迟是一个严重的问题，您可以将表单和js放在页面的顶部(js秒)。
Stack Overflow用户
发布于 2017-08-24 17:31:39
这里有一个非常简单的现代解决方案来解决这个老问题。
if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
alert('Got here using the browser "Back" or "Forward" button.');
}目前，所有主流浏览器都支持window.performance。
Stack Overflow用户
发布于 2011-06-16 06:05:19
这篇文章对此进行了解释。请看下面的代码：http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
<html>
<head>
<script>
function pageShown(evt){
if (evt.persisted) {
alert("pageshow event handler called. The page was just restored from the Page Cache (eg. From the Back button.");
} else {
alert("pageshow event handler called for the initial load. This is the same as the load event.");
}
}
function pageHidden(evt){
if (evt.persisted) {
alert("pagehide event handler called. The page was suspended and placed into the Page Cache.");
} else {
alert("pagehide event handler called for page destruction. This is the same as the unload event.");
}
}
window.addEventListener("pageshow", pageShown, false);
window.addEventListener("pagehide", pageHidden, false);
</script>
</head>
<body>
<a href="http://www.webkit.org/">Click for WebKit</a>
</body>
</html>https://stackoverflow.com/questions/829046
复制相似问题