Question

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

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

        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);
            }
        }

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

enter image description here

Answer 1

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

浏览器显示原生对话框：

enter image description here

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

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

Answer 2

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

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

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

Answer 3

更新（2013）

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

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

您将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?";
});

Originally

停止页面导航并等待用户确认

3 个答案: