Eerik Sven Puudist的解决方案…

var isSubmitting = false;

$(document).ready(function () {
    $('form').submit(function(){
        isSubmitting = true
    })

    $('form').data('initial-state', $('form').serialize());

    $(window).on('beforeunload', function() {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
            return 'You have unsaved changes which will not be saved.'
        }
    });
})

…在复杂的面向对象设置中，自发地为我完成了这项工作，而不需要任何更改。

我应用的唯一更改是引用具体的表单(每个文件只有一个表单)，称为“formForm”('form' -> '#formForm'):

<form ... id="formForm" name="formForm" ...>

特别出色的是，提交按钮被“单独保留”了。

此外，它也适用于最新版本的Firefox(截至2019年2月7日)。

增加@codecaster的想法 您可以将此添加到表单的每个页面(在我的情况下，我以全局方式使用它，因此只有在表单上才会有此警告)将其函数更改为

if ( formSubmitting || document.getElementsByTagName('form').length == 0) 

同时在表单提交上添加包括登录和取消按钮的链接，这样当人们按下取消或提交表单时，就不会在没有表单的每一页中触发警告…

<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>

通用解决方案无需配置，自动检测所有输入修改，包括可满足的元素:

"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
    const target = evt.target;
    if (!(defaultValue in target || defaultValue in target.dataset)) {
        target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
    }
});
// detect input modifications
addEventListener("input", (evt) => {
    const target = evt.target;
    let original;
    if (defaultValue in target) {
        original = target[defaultValue];
    } else {
        original = target.dataset[defaultValue];
    }
    if (original !== ("" + (target.value || target.textContent)).trim()) {
        if (!modified_inputs.has(target)) {
            modified_inputs.add(target);
        }
    } else if (modified_inputs.has(target)) {
        modified_inputs.delete(target);
    }
});
// clear modified inputs upon form submission
addEventListener("submit", (evt) => {
    modified_inputs.clear();
    // to prevent the warning from happening, it is advisable
    // that you clear your form controls back to their default
    // state with evt.target.reset() or form.reset() after submission
});
// warn before closing if any inputs are modified
addEventListener("beforeunload", (evt) => {
    if (modified_inputs.size) {
        const unsaved_changes_warning = "Changes you made may not be saved.";
        evt.returnValue = unsaved_changes_warning;
        return unsaved_changes_warning;
    }
});
})();

简短的回答:

let pageModified = true

window.addEventListener("beforeunload", 
  () => pageModified ? 'Close page without saving data?' : null
)

var unsaved = false;
$(":input").change(function () {         
    unsaved = true;
});

function unloadPage() {         
    if (unsaved) {             
        alert("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
    }
} 
window.onbeforeunload = unloadPage;

下面的一句话对我很管用。

window.onbeforeunload = s => modified ? "" : null;

根据应用程序的状态将modified设置为true或false。