防止意外返回浏览答案

【问题标题】：Prevent an accidental Back Browse防止意外返回浏览
【发布时间】：2010-08-30 16:39:07
【问题描述】：

我有一个客户刚拿到 Apple Magic Mouse。我们建立了一个食谱网站，当她输入食谱的所有信息时，她非常不高兴，然后去拿她的新鼠标，不小心滚动到右边，它会返回浏览，她的所有信息都丢失了。所以她想警告/弹出以防止该页面上发生这种情况。

有什么建议或指向我这样做的一些 JS 吗？

【问题讨论】：

标签： javascript browser navigation back-button

【解决方案1】：

这是一个基本的“离开前警告”脚本。当用户在 textarea 中按下一个键时，如果用户即将离开页面，将会通知用户：

<script type="text/javascript">
var changes = false;
window.onbeforeunload = function(){
   if(changes){
      return "You're about to leave this page.";
   }
};
</script>
<textarea onkeypress="window.changes=true">recipe here</textarea>

或者，您可以在页面加载时将文本字段的内容存储在一个变量中，然后进行比较。当访问者只按文本区域中的箭头键而不实际修改它时，这将消除一些混乱。

【讨论】：

是的，如果有勇敢的小鹿被使用此遗留代码所击中，WebKit（谷歌浏览器，Safari）不支持使用addEventListener 进行 beforeunload。
唯一可靠的方法是将onbeforeunload设置为window的属性。由于每个页面应该只有一个，所以无论如何您都没有理由要使用 addEventListener。
你必须为（例如）Opera 做一些别的事情。对于链接来说，这并不难，但我认为后退按钮处理起来并不有趣。
根据this post 的说法，Opera 不需要这样的功能，因为当用户离开页面时会保存状态（包括表单值）。如果您使用 Opera，只需按“返回”即可。

【解决方案2】：

所以她想警告/弹出以防止该页面上发生这种情况。

您可以挂钩浏览器的onBeforeUnload 事件，然后显示确认消息。

【讨论】：