3

我允许用户在表单字段中进行一些更改，并且根据用户是否进行了一些更改，我启用了“提交更改”按钮。

我想添加一个功能，要求用户确认他想要导航到其他页面而不提交他所做的更改。我添加了代码来显示一个对话框，但问题是对话框显示了一小段时间，然后页面导航移动到另一个页面。我的代码是：

        window.onbeforeunload = function() {
            if(!dijit.byId('editBtn').get('disabled')) {
                discardChanges(
                        'Pending Unsaved Changes',
                        'You have pending unsaved changes. Do you really want to discard them?',
                        'Discard Changes',
                        function() {
                            return true;
                        },
                        function() {
                            return false;
                        },
                        300,
                        700);
            }
        }

如何阻止浏览器移动到其他页面并等待用户单击对话框上的按钮，然后决定是否丢弃单击。对话框如下所示：

在此处输入图像描述

4

3 回答 3

5

使用事件window.onbeforeunload，该事件在页面卸载时触发并返回字符串“您有未保存的未保存更改。您真的要丢弃它们吗？”

浏览器显示本机对话框：

在此处输入图像描述

这是 AFAIK 停止导航的唯一方法。

jsFiddle：http: //jsfiddle.net/phusick/R6EJ3/show/light/

于 2012-09-10T11:58:05.810 回答
3

太多网站滥用了此功能，因此出于安全原因，浏览器添加了反措施。

Opera 不支持该事件。现代版本的 Firefox 仅显示标准化的本机消息。Chrome、Safari 和 IE 显示本机消息和函数返回的自定义消息。据我所知，您无法阻止该事件。

我建议您将更改另存为草稿。请注意 Opera 不支持该事件，因此您可能需要根据计时器保存更改。通过计时器将其保存为草稿，作为奖励，您还可以让用户在浏览器崩溃后返回并继续。

于 2012-09-10T14:56:30.953 回答
0

更新 (2013)

原始答案适用于 IE6-8 和 FX1-3.5（这是我们在 2009 年编写它时的目标），但现在已经过时并且在大多数当前浏览器中都不起作用 - 我已经离开了下面以供参考。

并非所有浏览器都一致地对待 window.onbeforeunload。它应该是一个函数引用而不是一个字符串（如原始答案所述），但这将在较旧的浏览器中工作，因为对大多数浏览器的检查似乎是是否将任何内容分配给 onbeforeunload （包括返回 null 的函数）。

您将 window.onbeforeunload 设置为函数引用，但在较旧的浏览器中，您必须设置事件的 returnValue 而不是仅返回一个字符串：

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

如果您希望用户在没有消息的情况下继续，则不能让该 confirmOnPageExit 进行检查并返回 null 。您仍然需要删除事件才能可靠地打开和关闭它：

// 开启 - 分配返回字符串的函数

window.onbeforeunload = confirmOnPageExit;

// 将其关闭 - 完全删除该功能

window.onbeforeunload = null;

原始答案（2009年工作）

打开它：

window.onbeforeunload = "Are you sure you want to leave?";

要关闭它：

window.onbeforeunload = null;

请记住，这不是一个正常的事件 - 您不能以标准方式绑定到它。

检查值？这取决于您的验证框架。

在 jQuery 中，这可能类似于（非常基本的示例）：

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

起初

于 2016-05-26T11:57:47.610 回答