导航到其他页面时显示像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.
 }

我想绑定停留在此页面上并将此页面按钮保留到我的按钮.

Answer 1

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

使用onbeforeunload处理程序无法实现目标,因为它需要"同步"运行:您无法显示警报,返回某些内容,然后稍后回调并返回实际值.当您从该函数返回时,浏览器将使用结果,您最终会显示自定义警报框,但用户操作将"丢失",因为处理程序已经完成.

为了更进一步,我从来没有找到任何能够提供自定义警报框的解决方案,在这种意义上它同步运行.通过同步行为,我的意思是代码执行将被阻止,直到用户单击警报按钮.我见过的每个自定义警报/确认/提示解决方案都使用回调.最后但并非最不重要的是,JavaScript甚至没有为"阻塞等待"提供一种方法.

UPDATE

您可以做的(和Facebook也这样做)是处理您知道将离开页面的导航链接,按钮,点击等,并且您可以在那里显示自定义确认框.

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

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