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

Question

可能重复:
如何在JS中停止页面卸载(导航)？
离开网页时提示用户输入未保存的更改

我有一个php格式,我在Dreamweaver中设计,只包含文本字段,从我的数据库中一次检索一条记录.我在此页面上还有一个"更新记录"按钮,当单击该按钮时,会更新数据库记录,并对表单中的数据进行任何更改.我希望如果用户以某种方式编辑表单数据并尝试离开页面而不单击"更新记录"按钮,则会提示他们页面包含未保存的更改,并且会要求他们验证是否要离开或不(如果可能的话,可能通过一些javasript).

任何帮助深表感谢.

Answer 1

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

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

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

您只能通过返回字符串并让浏览器提示来停止导航.呼叫alert或confirm实际上被禁止进入onbeforeunload,并且onunload您无法实际停止导航.