如何使用后退按钮检测用户是否已进入页面？

Question

这个问题类似于在用户在浏览器上单击后退按钮时进行跟踪，但不相同...我有一个解决方案，并将其发布在此处以供参考和反馈。如果任何人有更好的选择，我将为您服务！

情况是我有一个页面，上面有一个“就地编辑”字样。即有一个“单击此处添加描述” DIV，单击该按钮将变为带有“保存”和“取消”按钮的TEXTAREA。单击“保存”将数据发布到服务器以更新数据库，并将新描述放置在DIV中代替TEXTAREA。如果刷新页面，则会使用“单击以编辑”选项从数据库中显示新的描述。这些天，相当标准的Web 2.0东西。

问题是，如果：

页面加载时没有描述

用户添加了描述

通过单击链接将页面导航到远离

用户单击后退按钮

然后，显示的内容（从浏览器的缓存中显示）是页面的版本，其中不包含包含新描述的动态修改的DIV。

这是一个相当大的问题，因为用户认为他们的更新已丢失，并且不一定了解他们需要刷新页面才能看到更改。

因此，问题是：如何在页面加载后将其标记为已修改，然后检测用户何时“返回”页面并在这种情况下强制刷新？

Answer 1

使用隐藏的形式。当您重新加载或单击“后退”按钮返回页面时，表单数据通常会保存在浏览器中。以下内容会出现在您的页面中（可能在底部附近）：<form name="ignore_me">&nbsp; &nbsp; <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() {&nbsp; &nbsp; dirty_bit.value = '1';}嗅探表单的js必须在html完全解析后执行，但是如果用户延迟是一个严重问题，则可以将表单和js放在页面顶部（js秒）。

Answer 2

这是解决这个老问题的非常简单的现代解决方案。if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {&nbsp; &nbsp; alert('Got here using the browser "Back" or "Forward" button.');}目前所有主要浏览器都支持window.performance。