javascript - 如何覆盖OnBeforeUnload对话框并将其替换为自己的对话框？(How can I override the OnBeforeUnload dialog and replace it with my own?)

Question

I need to warn users about unsaved changes before they leave a page (a pretty common problem).(我需要在用户离开页面之前警告用户有关未保存的更改（这是一个非常常见的问题）。)

window.onbeforeunload=handler This works but it raises a default dialog with an irritating standard message that wraps my own text.(这可以工作，但是会引发一个默认对话框，其中包含包装我自己的文本的刺激性标准消息。) I need to either completely replace the standard message, so my text is clear, or (even better) replace the entire dialog with a modal dialog using jQuery.(我需要完全替换标准消息，以使文本清晰，或者（甚至更好）使用jQuery将整个对话框替换为模式对话框。) So far I have failed and I haven't found anyone else who seems to have an answer.(到目前为止，我失败了，但是我还没有找到似乎有答案的其他人。) Is it even possible?(可能吗？) Javascript in my page:(我页面中的Javascript：) <script type="text/javascript"> window.onbeforeunload=closeIt; </script> The closeIt() function:(closeIt（）函数：) function closeIt() { if (changes == "true" || files == "true") { return "Here you can append a custom message to the default dialog."; } } Using jQuery and jqModal I have tried this kind of thing (using a custom confirm dialog):(我使用jQuery和jqModal尝试了这种事情（使用自定义确认对话框）：) $(window).beforeunload(function() { confirm('new message: ' + this.href + ' !', this.href); return false; }); which also doesn't work - I cannot seem to bind to the beforeunload event.(这也行不通-我似乎无法绑定到beforeunload事件。)   ask by flesh translate from so

Answer 1

You can't modify the default dialogue for onbeforeunload , so your best bet may be to work with it.(您无法修改onbeforeunload的默认对话框，因此最好的选择是使用它。)

window.onbeforeunload = function() { return 'You have unsaved changes!'; } Here's a reference to this from Microsoft:(这是 Microsoft对此的参考 ：) When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it.(将字符串分配给window.event的returnValue属性时，将出现一个对话框，为用户提供保留在当前页面上并保留分配给它的字符串的选项。) The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.(对话框中显示的默认语句“您确定要离开此页面吗？...按OK继续，或按Cancel保留在当前页面上。”不能删除或更改。) The problem seems to be:(问题似乎是：) When onbeforeunload is called, it will take the return value of the handler as window.event.returnValue .(调用onbeforeunload ，它将把处理程序的返回值作为window.event.returnValue 。) It will then parse the return value as a string (unless it is null).(然后，它将返回值解析为字符串（除非它为null）。) Since false is parsed as a string, the dialogue box will fire, which will then pass an appropriate true / false .(由于将false解析为字符串，因此对话框将触发，然后传递适当的true / false 。) The result is, there doesn't seem to be a way of assigning false to onbeforeunload to prevent it from the default dialogue.(结果是，似乎没有一种将false分配给onbeforeunload的方法，以防止它与默认对话。) Additional notes on jQuery:(jQuery的其他说明：) Setting the event in jQuery may be problematic, as that allows other onbeforeunload events to occur as well.(在jQuery中设置事件可能会出现问题，因为这也会导致其他onbeforeunload事件发生。) If you wish only for your unload event to occur I'd stick to plain ol' JavaScript for it.(如果您只希望发生卸载事件，那么我会坚持使用普通的JavaScript。) jQuery doesn't have a shortcut for onbeforeunload so you'd have to use the generic bind syntax.(jQuery没有onbeforeunload的快捷方式，因此您必须使用通用bind语法。) $(window).bind('beforeunload', function() {} ); Edit 09/04/2018 : custom messages in onbeforeunload dialogs are deprecated since chrome-51 (cf: release note )(编辑09/04/2018 ：自chrome-51起，onbeforeunload对话框中的自定义消息已弃用（cf： 发行说明 ）)