当用户尝试从现有页面导航时,我想显示自定义警报框而不是浏览器默认警报框。使用此代码:
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.
}
我想将其停留在此页面上,并将此页面按钮保留为我的按钮。
问题不在于实现自定义警报框(其他一些答案指出了这一点),这并不是一件难事,有很多解决方案,框架,插件等。问题在于JavaScript执行时间。
使用onbeforeunload
处理程序无法实现您的目标,因为它需要“同步”运行:您无法显示警报,返回某些内容,然后再返回回调并返回实际值。当您从函数返回时,结果将由浏览器使用,最终将显示您的自定义警报框,但由于处理程序已经完成,因此用户操作将“丢失”。
更进一步,我再也找不到能够提供自定义警报框的解决方案,该警报框在这种意义上是同步运行的。通过同步行为,我的意思是代码执行将被阻止,直到用户单击警报按钮。我见过的每个自定义警报/确认/提示解决方案都在使用回调。最后但并非最不重要的一点是,JavaScript甚至没有提供一种“阻塞等待”的方式。
更新
您可以做的(Facebook也可以做)是处理导航链接,按钮,单击等,您知道该链接将离开页面,并且可以在其中显示自定义确认框。
注意:实际上,我已经尝试过Facebook,对于我来说(Windows 10,最新的Chrome),当我尝试关闭浏览器选项卡时,它会提示默认的确认框,而不是任何自定义选项。但是,当我单击链接时,确实显示了一个自定义确认框。综上所述,Facebook在可能的情况下使用自定义工具,而在不可能的情况下(仅使用onbeforeunload
,如浏览器关闭,选项卡关闭,页面重新加载,URL导航等),它使用默认的处理机制。
注意2:对于2016年,似乎所有主流浏览器都选择不让开发人员自定义显示在上的消息onbeforeunload
,因此您string
从处理程序返回的值将不被视为消息。关于此有几篇文章。主要原因是安全性,因为许多站点都使用它来欺骗幼稚的用户并要求他们执行某些操作,或提示他们恶意内容等。现在,所有主要的浏览器都显示一条默认消息,说明可能尚未保存更改。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句