当用户点击浏览器后退按钮时提醒用户 - 有充分的理由答案

【问题标题】：Alert user when they hit the browser back button - with good reason当用户点击浏览器后退按钮时提醒用户 - 有充分的理由
【发布时间】：2011-03-03 07:26:05
【问题描述】：

我知道这里有禁忌，请不要回复“你永远不应该这样做”之类的。

我在向导中有一个很长的表单，一些用户习惯于使用浏览器的后退和前进按钮，他们使用这些按钮而不是表单向导上的“后退”和“下一步”按钮。如果他们点击浏览器的后退按钮，他们将丢失所有表单数据（这很麻烦，因为表单太长了）。

是否可以显示一个警报，什么时候会有一个“带我离开这里”按钮和一个“取消”按钮，所以如果他们点击取消它会取消返回按钮的功能？

【问题讨论】：

我不确定您是否违反了“从不这样做”的规则。当我尝试离开一个我没有保存更改的页面、Gmail、我的银行等时，Stackoverflow 会提醒我。我总是很感激他们有。我还看到多页表单数据在来回浏览器操作中持续存在，但我对 Sarfraz 下面的警报感到满意。

【解决方案1】：

您应该从onbeforeunload 事件返回一条消息，如下所示：

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

请注意，当用户出于任何原因离开页面时，即使在您的向导完成之后，也会触发此事件。
您应该在向导完成时设置一个标志并且不返回消息。

【讨论】：

window.onbeforeunload = function() { return "离开此页面将重置向导"; };工作得很好。虽然我更喜欢 jQuery 语法，但我无法让 Sarfraz Ahmed 的代码显示取消和确定按钮。谢谢 SLaks
向导完成后如何设置标志？绝对需要！
视情况而定。你的向导是如何完成的？创建一个全局var isWizardFinished = false;，然后在向导完成时将其设置为true。

【解决方案2】：

您可以使用 jQuery BBQ 插件重写下一个/上一个按钮的功能，使其在整个“向导”中的过渡更加流畅

虽然设置起来有点复杂，但如果您正在寻找相同的功能，请查看提供的示例。

您可能需要重构代码以适应这种情况，这需要几个小时。

【讨论】：