简短的回答:

let pageModified = true

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

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>

简短的回答:

let pageModified = true

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

您可以使用serialize()通过序列化表单值来创建URL编码的文本字符串，并检查表单在卸载前是否已更改

$(document).ready(function(){
    var form = $('#some-form'),
        original = form.serialize()

    form.submit(function(){
        window.onbeforeunload = null
    })

    window.onbeforeunload = function(){
        if (form.serialize() != original)
            return 'Are you sure you want to leave?'
    }
})

参考这个链接https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form 作者:弗拉基米尔·西多伦科

查看JavaScript onbeforeunload事件。它是微软引入的非标准JavaScript，但是它可以在大多数浏览器中运行，他们的onbeforeunload文档有更多的信息和示例。