提交更改时，如何显示“是否确实要离开此页面？”？

javascript html onbeforeunload message confirm

2022-08-30 00:03:43

在stackoverflow中，如果你开始进行更改，然后你试图离开页面，一个javascript确认按钮出现并询问：“你确定要离开这个页面吗？”blee blah bloo...

以前是否有人实现过此功能，我如何跟踪已提交的更改？我相信我可以自己做到这一点，我正在努力从你们这些专家那里学习好的做法。

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

<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?\n\nYou have started writing or editing a post.\n\nPress 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>

任何人都可以发布示例吗？

答案 1

更新（2017）

现代浏览器现在认为显示自定义消息是一种安全隐患，因此已从所有浏览器中删除。浏览器现在仅显示通用消息。由于我们不再需要担心设置消息，因此它就像：

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

请阅读以下内容，了解旧版浏览器支持。

更新（2013）

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

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

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

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

如果希望用户继续而不显示消息，则不能让该检查并返回 null。您仍然需要删除该事件才能可靠地将其打开和关闭：confirmOnPageExit

// 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;

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

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

在jQuery中，这可能是这样的（非常基本的例子）：

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

答案 2

微软主义是我们最接近标准解决方案的东西，但请注意，浏览器支持是不均衡的;例如，对于Opera，它仅适用于版本12及更高版本（在撰写本文时仍处于测试阶段）。onbeforeunload

此外，为了获得最大的兼容性，您需要做的不仅仅是返回一个字符串，如 Mozilla 开发者网络上所述。

例：定义以下两个用于启用/禁用导航提示的函数（参见 MDN 示例）：

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

然后定义一个类似如下的表单：

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

这样，仅当用户更改了文本区域时，才会收到有关导航离开的警告，并且在实际提交表单时不会收到提示。

提交更改时，如何显示“是否确实要离开此页面？”？

更新 （2017）

更新 （2013）

原始答案（2009年工作）

更新（2017）

更新（2013）