javascript - 当您导航到其他页面时显示自定义警告框，如 facebook

Question

当用户尝试从现有页面导航时，我想显示自定义警告框而不是浏览器默认警告框。使用此代码:

 window.onbeforeunload = function(){
    return "are you sure?";
 }

如果用户有任何未保存的数据并想离开页面，我可以使用此代码提醒用户。但我想像 facebook 一样用我自己的设计制作自定义警告框。怎么可能？像这样的东西:

 window.onbeforeunload = function(){
    myownalertbox.show();  //here I want to bind leave page or stay on page button with my own button.
 }

而且我想绑定(bind)留在这个页面上并将这个页面按钮留给我的按钮。

Answer 1

问题不在于实现自定义警报框(正如其他一些答案指出的那样)，这不是一件难事，有很多解决方案、框架、插件等。问题在于 JavaScript 执行时间.

使用 onbeforeunload 处理程序不可能实现你的目标，因为它需要“同步”运行:你不能显示警报，返回一些东西，然后通过一些回调返回并返回实际的值(value)。当您从函数返回时，结果将被浏览器使用，您最终会显示自定义警告框，但用户操作将“丢失”，因为处理程序已经完成。

更进一步，我从来没有找到任何可以提供自定义警告框的解决方案，从这个意义上讲，它的行为是同步的。通过同步行为，我的意思是代码执行将被阻止，直到用户单击警报按钮。我见过的每个自定义警报/确认/提示解决方案都使用回调。最后但同样重要的是，JavaScript 甚至没有提供一种“阻塞等待”的方法。

更新

您可以做的(Facebook 也这样做)是处理您知道会离开页面的导航链接、按钮、点击等，您可以在那里显示自定义确认盒子。

注意:实际上我已经尝试过 Facebook，对我来说(Windows 10、Chrome 最新版本)当我尝试关闭浏览器选项卡时它会提示默认确认框，而不是任何自定义选项卡。但是当我点击一个链接时，它确实显示了一个自定义确认框。所以总而言之，Facebook 在可能的情况下使用自定义的，而在不可能的情况下(仅使用 onbeforeunload，如浏览器关闭、选项卡关闭、页面重新加载、URL 导航等)它使用默认值处理机制。

注意 2:对于 2016 年，似乎所有主要浏览器都选择不允许开发人员自定义显示在 onbeforeunload 上的消息，因此您的 string 处理程序的返回值不会被视为消息。有几篇关于此的文章。主要原因是安全性，因为许多网站使用它来欺骗天真的用户并要求他们执行某些操作，或提示他们恶意内容等。现在所有主流浏览器都会显示一条默认消息，提示可能有未保存的更改。