Question

我需要提示用户在离开页面时保存他们的工作。我已经尝试过onbeforeunload但是我需要显示一个样式提示而不是通常的对话框。 Facebook已经设法实现这一目标（如果您有Facebook帐户，编辑您的个人资料信息并转到另一个页面而不保存，您会收到样式提示）。我也试过jquery卸载但似乎没有办法阻止unload事件传播。

Answer 1

仔细看看Facebook正在做什么：如果您点击页面上的链接，则会收到提示，但在地址栏中输入新网址，点击书签或导航返回浏览器的历史记录。

如果这对你有用，那就很容易了：只需在页面的每个链接上添加一个click事件处理程序，然后从中触发你的程式化确认。由于这些处理程序将在页面本身触发的任何导航事件的 start 之前被调用，因此您可以在处理程序中执行任何您想要的操作 - 保存数据，完全取消事件，记录预定目的地，并推迟到确认后......

但是，如果您确实需要或想要响应外部触发的导航事件，则必须使用onbeforeunload。是的，这个对话很糟糕，而且你不能取消这个事件 - 这就是我们为那些在90年代滥用这些功能的所有可耻的白痴所付出的代价。遗憾...

Answer 2

选择的答案很好，但我仍然需要挖掘细节。如果你想使用onbeforeunload事件，这里有一些示例代码：

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

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。此外，我在提交表单和点击取消按钮时卸载了前载。

希望这有助于其他人。

提示用户在离开页面时进行保存

3 个答案: