如果用户试图离开网页，如何提示他们未保存的更改

Question

可能重复：
如何阻止JS中的页面卸载(导航离开(
离开网页时提示用户未保存的更改

我有一个php表单，它是我在dreamweaver中设计的，只包含文本字段，每次从我的数据库中检索一条记录。我在这个页面上还有一个"更新记录"按钮，当单击该按钮时，会使用对表单中的数据所做的任何更改来更新数据库记录。我希望，如果用户以某种方式编辑表单数据，并试图在不单击"更新记录"按钮的情况下离开页面，他们将被提示页面包含未保存的更改，并被要求验证是否要离开(如果可能的话，可能通过一些javasrpt(。

非常感谢您的帮助。

Answer 1

onbeforeunload在导航真正开始之前触发，您可以使用一种非常独特的方法停止导航：只需返回您希望在对话框中显示的字符串，浏览器就会询问用户是否真的想离开页面。

如果不返回字符串，浏览器将继续正常导航。例如，您可以使用此行为，仅在用户有未保存的更改时显示提示。

window.onbeforeunload = function(e) {
    if (unsavedChanges) return 'Dialog text here.';
};

您只能通过返回字符串并让浏览器提示来停止导航。在onbeforeunload中实际上禁止调用alert或confirm，而在onunload中，您没有实际停止导航的功能。

Answer 2

将unload方法与jquery的"on"api一起使用。

 var flag = true; // set this var according to your use.
 $(window).on('beforeunload', function(){
     if(flag) {
        return "It looks like you have input you haven't submitted."
      }
 });