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

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

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

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

jquery 'beforeunload'对我来说非常有用

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

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

让我来进一步解释一下基斯已经很惊人的答案:

自定义警告消息

为了允许自定义警告消息，你可以像这样把它包装在一个函数中:

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

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

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

然后用自定义消息调用该函数:

preventNavigation("Baby, please don't go!!!");

再次启用导航

要重新启用导航，您所需要做的就是设置窗口。Onbeforeunload为null。在这里，它被包装在一个简洁的小函数中，可以在任何地方调用:

function enableNavigation() {
    window.onbeforeunload = null;
}

使用jQuery将其绑定到表单元素

如果使用jQuery，这可以很容易地绑定到表单的所有元素，如下所示:

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

然后允许表单提交:

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

Dynamically-modified形式:

可以根据需要将preventNavigation()和enableNavigation()绑定到任何其他函数，例如动态修改表单，或单击发送AJAX请求的按钮。我通过在表单中添加一个隐藏的输入元素来做到这一点:

<input id="dummy_input" type="hidden" />

然后，每当我想阻止用户导航离开时，我就会触发输入上的更改，以确保preventNavigation()被执行:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

从webapi ->WindowEventHandler->onbeforeunload，它建议使用window.addEventListener()和beforeunload事件，而不是onbeforeunload。

语法的例子

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };

注意:HTML规范规定作者应该使用Event. preventdefault()方法而不是使用Event。returnValue来提示用户。

所以，就你的情况而言，代码应该是这样的:

//javascript
window..addEventListener("beforeunload", function(event) { 
    //your code

    // If you prevent default behaviour in Mozilla Firefox prompt will always be shown
    e.preventDefault();

    // Chrome requires returnValue to be set
    e.returnValue = '';
})