如何显示“您确定要离开此页面吗?"何时提交更改?

2022-01-30 00:00:00 message javascript html confirm onbeforeunload

在 stackoverflow 中，如果您开始进行更改然后尝试离开页面，则会出现一个 javascript 确认按钮并询问:您确定要离开此页面吗?"呜呜呜……

Here in stackoverflow, if you started to make changes then you attempt to navigate away from the page, a javascript confirm button shows up and asks: "Are you sure you want to navigate away from this page?" blee blah bloo...

以前有没有人实现过这个，我如何跟踪已提交的更改?我相信我自己可以做到这一点，我正在努力向各位专家学习良好做法.

Has anyone implemented this before, how do I track that changes were committed? I believe I could do this myself, I am trying to learn the good practices from you the experts.

我尝试了以下方法，但仍然不起作用:

I tried the following but still doesn't work:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?

You have started writing or editing a post.

Press OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

谁能发个例子?

推荐答案

更新(2017)

现代浏览器现在认为显示自定义消息是一种安全隐患，因此 从所有这些中删除.浏览器现在只显示通用消息.既然我们再也不用担心设置消息了，就这么简单:

Update (2017)

Modern browsers now consider displaying a custom message to be a security hazard and it has therefore been removed from all of them. Browsers now only display generic messages. Since we no longer have to worry about setting the message, it is as simple as:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

阅读下文了解旧版浏览器支持.

Read below for legacy browser support.

原始答案适用于 IE6-8 和 FX1-3.5(这是我们在 2009 年编写它时的目标)，但现在已经过时并且无法在大多数当前浏览器中使用 - 我'已将其留在下面以供参考.

The orginal answer is suitable for IE6-8 and FX1-3.5 (which is what we were targeting back in 2009 when it was written), but is rather out of date now and won't work in most current browsers - I've left it below for reference.

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

The window.onbeforeunload is not treated consistently by all browsers. It should be a function reference and not a string (as the original answer stated) but that will work in older browsers because the check for most of them appears to be whether anything is assigned to onbeforeunload (including a function that returns null).

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

You set window.onbeforeunload to a function reference, but in older browsers you have to set the returnValue of the event instead of just returning a string:

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.您仍然需要删除该事件才能可靠地打开和关闭它:

You can't have that confirmOnPageExit do the check and return null if you want the user to continue without the message. You still need to remove the event to reliably turn it on and off:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

原始答案(2009 年工作)

打开它:

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

要关闭它:

window.onbeforeunload = null;

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

Bear in mind that this isn't a normal event - you can't bind to it in the standard way.

检查值?这取决于您的验证框架.

To check for values? That depends on your validation framework.

在 jQuery 中，这可能类似于(非常基本的示例):

In jQuery this could be something like (very basic example):

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

相关文章