javascript - 如果用户尝试离开网页，如何提示用户未保存的更改

Question

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

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

任何帮助深表感谢。

Answer 1

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

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

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

您只能通过返回字符串并让浏览器提示来停止导航。在和 中调用alert或confirm实际上是被禁止的，你无法真正停止导航。onbeforeunloadonunload

Answer 2

将卸载方法与 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."
      }
 });