我怎样才能覆盖OnBeforeUnload对话框，并用我自己的？

在离开页面之前，我需要警告用户有关未保存的更改（这是一个很常见的问题）。

window.onbeforeunload=handler 

这工作，但它提出了一个默认的对话与一个恼人的标准信息包装我自己的文字。 我需要完全replace标准的消息，所以我的文本是清晰的，或者（甚至更好）用jQueryreplace整个对话框的模式对话框。

到目前为止，我失败了，我还没有find任何似乎有答案的人。 这甚至有可能吗？

我的网页中的Javascript：

 <script type="text/javascript"> window.onbeforeunload=closeIt; </script> 

closeIt（）函数：

 function closeIt() { if (changes == "true" || files == "true") { return "Here you can append a custom message to the default dialog."; } } 

使用jQuery和jqModal我已经尝试过这种事情（使用自定义确认对话框）：

 $(window).beforeunload(function() { confirm('new message: ' + this.href + ' !', this.href); return false; }); 

这也不起作用 – 我似乎无法绑定到beforeunload事件。

Answer 1

你不能修改onbeforeunload的默认对话框，所以你最好的select可能是使用它。

 window.onbeforeunload = function() { return 'You have unsaved changes!'; } 

这里有一个来自微软的参考资料 ：

将一个string分配给window.event的returnValue属性时，会出现一个对话框，让用户可以select保留在当前页面上并保留分配给它的string。 在对话框中出现的默认语句“您确定要离开此页面吗？…按OK继续，或取消保留在当前页面上”，不能删除或更改。

这个问题似乎是：

1. 当onbeforeunload被调用时，它将把处理程序的返回值作为window.event.returnValue 。
2. 然后它会将返回值parsing为一个string（除非它为空）。
3. 由于false被parsing为一个string，对话框将会触发，然后传递一个合适的true / false 。

结果是，似乎没有一种方法来分配false以避免默认对话。

关于jQuery的其他注意事项：

• 在jQuery中设置事件可能是有问题的，因为这也允许其他的onbeforeunload事件发生。 如果你只希望你的卸载事件发生，我会坚持原汁原味的JavaScript为它。

• jQuery没有onbeforeunload的快捷方式，所以你必须使用通用bind语法。

   $(window).bind('beforeunload', function() {} ); 

Answer 2

欧文是对的。 而这背后的原因是安全。 防止页面卸载在网页表单等中很有用，但是恶意网站很容易利用它来欺骗用户停留在页面上。 这就是为什么Web浏览器实现标准的消息，并有这种插入自定义文本的机制。

Answer 3

对我来说（IE8，Chrome，Firefox）有效的是：

 $(window).bind("beforeunload",function(event) { if(hasChanged) return "You have unsaved changes"; }); 

IE浏览器与其他浏览器行为之间存在差异时，如果不需要提示，则不要返回任何内容。

Answer 4

虽然在某些情况下您可以对此框做任何事情，但是您可以拦截某人点击某个链接。 对我来说，这是值得在大多数情况下的努力，作为后备，我已经离开了卸载事件。

我用Boxy代替了标准的jQuery对话框，可以在这里find： http : //onehackoranother.com/projects/jquery/boxy/

 $(':input').change(function() { if(!is_dirty){ // When the user changes a field on this page, set our is_dirty flag. is_dirty = true; } }); $('a').mousedown(function(e) { if(is_dirty) { // if the user navigates away from this page via an anchor link, // popup a new boxy confirmation. answer = Boxy.confirm("You have made some changes which you might want to save."); } }); window.onbeforeunload = function() { if((is_dirty)&&(!answer)){ // call this if the box wasn't shown. return 'You have made some changes which you might want to save.'; } }; 

您可以附加到另一个事件，并过滤更多关于什么样的锚点被点击，但这适用于我和我想做的，并作为其他人使用或改进的示例。 以为我会分享这个想要这个解决scheme的人。

我已经删除了代码，所以这可能无法正常工作。

Answer 5

1）使用onbeforeunload，而不是onunload。

2）重要的是避免执行返回语句。 我的意思是，不要这样做，以避免从你的处理程序返回。 你可以返回所有权利，但是你可以通过确保你到达函数的结尾并且不执行返回语句来实现。 在这些条件下，内置的标准对话框不会发生。

3）如果你使用onbeforeunload，你可以在unbeforeunload处理器中运行ajax调用来清理服务器，但它必须是同步的，并且你必须等待并处理onbeforeunload处理程序中的回复（仍然尊重条件（2））。 我这样做，它工作正常。 如果你做一个同步的Ajax调用，一切都会被保持，直到响应回来。 如果你做一个asynchronous的，认为你不关心从服务器的答复，页面卸载继续，你的ajax调用被中止这个过程 – 包括一个远程脚本，如果它正在运行。

Answer 6

您可以检测用户按下哪个button（确定或取消），因为只有当用户select离开页面时才会调用onunload函数。 在这个function中Althoug的可能性是有限的，因为DOM正在崩溃。 您可以运行javascript，但是ajax POST不会执行任何操作，因此您无法使用此方法进行自动注销。 但有一个解决scheme。 window.open（'logout.php'）在onunload函数中执行，所以用户将会注销一个新的窗口。

 function onunload = (){ window.open('logout.php'); } 

当用户离开页面或closures活动窗口和用户通过“logout.php”注销时调用此代码。 当注销php包含代码时，新窗口立即closures：

 window.close(); 

Answer 7

这不能在铬现在做，以避免垃圾邮件，请参阅javascript onbeforeunload不显示自定义消息的更多细节。

Answer 8

尝试放置一个return; 而不是一个消息..这是我的大多数浏览器的工作。 （这只会真的阻止对话框的呈现）

 window.onbeforeunload = function(evt) { //Your Extra Code return; } 

Answer 9

我面临同样的问题，我可以用我的信息获得自己的对话框，但我面临的问题是：1）它只是在我想要的所有导航上发送消息，只是为了近距离点击。 2）用我自己的确认消息，如果用户select取消它仍然显示浏览器的默认对话框。

以下是我find的解决scheme代码，我在Master页面上写的。

 function closeMe(evt) { if (typeof evt == 'undefined') { evt = window.event; } if (evt && evt.clientX >= (window.event.screenX - 150) && evt.clientY >= -150 && evt.clientY <= 0) { return "Do you want to log out of your current session?"; } } window.onbeforeunload = closeMe; 

Answer 10

  <script type="text/javascript"> window.onbeforeunload = function(evt) { var message = 'Are you sure you want to leave?'; if (typeof evt == 'undefined') { evt = window.event; } if (evt) { evt.returnValue = message; } return message; } </script> 

请参阅http://www.codeprojectdownload.com

Answer 11

我有同样的问题，这让我疯狂。 我想完全摆脱popup窗口，因为我不想警告用户 – 只要把他们从一个表格转到一个新的页面。 我试了上面的答案，并没有得到任何工作。

最终，我得到这个忽略默认的Firefoxpopup窗口，在这个网站的帮助下： http : //code-maven.com/prevent-leaving-the-page-using-plain-javascript 。 在redirect窗口之前添加了它：

 window.onbeforeunload = function() { if (data_needs_saving()) { return ""; } else { return ""; } }; window.location.href = 'www.redirect here'; 

Answer 12

怎么样使用“绑定”命令“一”的专业版本。 一旦事件处理程序第一次执行，它将作为事件处理程序自动删除。

 $(window).one("beforeunload", BeforeUnload);