当用户离开页面时提示保存的问题

Question

当用户离开页面时，我需要提示用户保存他们的工作。我已经尝试使用onbeforeunload，但我需要显示一个样式美观的提示而非通常的对话框。Facebook已经实现了这一点（如果您有Facebook帐户，请编辑您的个人资料信息并转到另一个页面，未保存退出时会弹出一个样式美观的提示）。我还尝试了jquery unload，但似乎没有办法阻止卸载事件传播。

- Akeem

---

我要去查一下 Stack Overflow 使用了什么技术。他们能够感知到用户的离开，即使他们不是前往另一个 Stack Overflow 页面。因此，他们必须是在客户端进行操作。 - Zack Marrapese

StackOverflow似乎使用普通的window.onbeforeunload。 - markus

你尝试过在"onbeforeunload"事件中展示一个特殊的div吗？那可能有效。 - BYK

Answer 1

仔细观察一下Facebook的做法：当在页面上点击一个链接时，会弹出提示，但在地址栏输入新的URL、点击书签或浏览器历史记录中返回时则没有任何提示。

如果这对你有用，那么很容易实现：只需为页面上的每个链接添加一个click事件处理程序，并从中触发你的样式化确认框。由于这些处理程序将在页面内部触发的任何导航事件之前被调用，所以你几乎可以在处理程序中执行任何想做的事情——保存数据、取消事件，记录目标并推迟到确认后再进行导航...

然而，如果你需要或想要响应外部触发的导航事件，你就必须使用onbeforeunload。是的，对话框看起来很烂，而且你无法取消事件——这是因为上世纪90年代所有滥用此类功能的可耻白痴们带来的代价。抱歉...

- Shog9

---

如果这还不够，您可以添加一个window.onbeforeunload来实现其他目的，以防Shog9提到的其他事件导致用户丢失数据。 - markus

在链接和onbeforeunload方面，+1是为了保险起见。不过，要节制使用它，只有在真正存在重要数据丢失的危险时才使用。就个人而言，我觉得SO的onbeforeunload有点烦人！ - bobince

我建议使用事件委托来代替在每个链接上注册事件处理程序... - James

@JimmyP：好建议 - 这不仅更容易/更快，而且允许每个链接事件处理程序通过自己消耗事件轻松避免确认。 - Shog9

Answer 2

选定的答案很好，但我仍然不得不深入挖掘细节。 如果您想使用onbeforeunload事件，这里是一些示例代码：

<script>
window.onbeforeunload= function() { return "Custom message here"; };
</script>

- Frank Schwieterman

Answer 3

为了改进其他人的答案，我开发了一个非常好的小脚本。

    $('.measurement_value').change(function() {
        $(window).bind('beforeunload', function(){
            return 'You have unsaved changes, are you sure you want to leave?';
        });

        $('#MeasurementAdminEditForm').submit(function(){
            $(window).unbind('beforeunload');
        });
        $('#CancelButton').click(function(){
            $(window).unbind('beforeunload');
        });
    });

在我的表单元素上，我都会添加“measurement_value”类，只有在这些元素中的一个更改时才会加载“beforeunload”。此外，在表单提交和取消按钮点击时，我都会卸载“beforeunload”。

希望这可以帮助其他人。

- Chris Pierce