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

Question

这个问题类似于在用户在浏览器上单击后退按钮时进行跟踪，但不相同...我有一个解决方案，并将其发布在此处以供参考和反馈。如果任何人有更好的选择，我将为您服务！情况是我有一个页面，上面有一个“就地编辑”字样。即有一个“单击此处添加描述” DIV，单击该按钮将变为带有“保存”和“取消”按钮的TEXTAREA。单击“保存”将数据发布到服务器以更新数据库，并将新描述放置在DIV中代替TEXTAREA。如果刷新页面，则会使用“单击以编辑”选项从数据库中显示新的描述。这些天，相当标准的Web 2.0东西。问题是，如果：页面加载时没有描述用户添加了描述通过单击链接将页面导航到远离用户单击后退按钮然后，显示的内容（从浏览器的缓存中显示）是页面的版本，其中不包含包含新描述的动态修改的DIV。这是一个相当大的问题，因为用户认为他们的更新已丢失，并且不一定了解他们需要刷新页面才能看到更改。因此，问题是：如何在页面加载后将其标记为已修改，然后检测用户何时“返回”页面并在这种情况下强制刷新？

Answer 1

使用隐藏的形式。当您重新加载或单击“后退”按钮返回页面时，表单数据通常会保存在浏览器中。以下内容会出现在您的页面中（可能在底部附近）：

<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秒）。

Answer 2

这是解决这个老问题的非常简单的现代解决方案。

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。