更新(2017)

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

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

阅读下面的内容，了解传统浏览器的支持。

更新(2013)

最初的答案适用于IE6-8和FX1-3.5(这是我们在2009年写它时的目标)，但现在已经过时了，不能在大多数当前的浏览器中工作-我把它留在下面作为参考。

窗外。并非所有浏览器都一致对待Onbeforeunload。它应该是一个函数引用，而不是一个字符串(如最初的答案所述)，但在旧的浏览器中也可以工作，因为对大多数浏览器的检查似乎是是否有任何东西被分配给onbeforeunload(包括返回null的函数)。

你设置窗口。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。你仍然需要删除事件来可靠地打开和关闭它:

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

根据这个线程上的所有答案，我写了下面的代码，它对我来说是有效的。

如果你只有一些输入/文本区域标签，需要检查onunload事件，你可以将HTML5数据属性赋值为data-onunload="true"

如。

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

和Javascript (jQuery)可以看起来像这样:

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

body标签有一个"onunload"参数，你可以从那里调用javascript函数。如果返回false，则阻止导航离开。

如果表单中输入了任何数据，这是一种简单的显示消息的方法，如果表单已提交，则不显示消息:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

当用户开始对表单进行更改时，将设置一个布尔标志。如果用户尝试离开页面，则检查窗口中的标志。onunload事件。如果设置了标志，则通过以字符串形式返回消息来显示消息。以字符串形式返回消息将弹出一个包含您的消息的确认对话框。

如果你使用ajax来提交更改，你可以在更改提交后(即在ajax成功事件中)将标志设置为false。

你可以在文本区域(或任何其他字段)添加一个onchange事件，在JS中设置一个变量。当用户试图关闭页面(window.onunload)时，您检查该变量的值并相应地显示警报。