当您导航到其他页面时,显示类似facebook的自定义警报框

用户名

在此处输入图片说明当用户尝试从现有页面导航时,我想显示自定义警报框而不是浏览器默认警报框。使用此代码:

 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.
 }

我想将其停留在此页面上,并将此页面按钮保留为我的按钮。

佐尔坦·塔玛西(ZoltánTamási)

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

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

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

更新

可以做的(Facebook也可以做)是处理导航链接,按钮,单击等,您知道该链接将离开页面,并且可以在其中显示自定义确认框。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在关闭自定义警报框之前,如何防止用户访问页面的其他部分?

创建自定义警报框时发生异常

在自定义警报对话框中从 Edittext 检索数据时显示空值?

Flutter-自定义警报对话框未显示

在服务android中显示自定义警报对话框

如何在jqgrid的custom_func中显示自定义警报框

如何在bootstrap3模式框上显示我的自定义警报框?

无法显示/显示自定义警报

Bootstrap 4-自定义警报弹出框

jQuery中的自定义警报和确认框

如何关闭“自定义警报”对话框

JavaScript 和 HTML 自定义警报框

Android中的“自定义警报”对话框

如何调用我的自定义警报控制器功能以在其他视图控制器中显示?

如何自定义警报对话框,以使按钮适合警报对话框

JavaFx自定义警报阶段

快速自定义警报(UIAlertView)

SwiftUI:创建自定义警报

如何在自定义警报对话框中将信息从活动传递到编辑文本

可以自定义 Firebase 错误消息模板或警报以显示自定义警报吗?

制作圆形自定义警报对话框:着色区域不正确

Android-如何在自定义警报对话框中检查按钮单击?

通过android自定义警报对话框传递额外数据

在自定义警报对话框中使用时 ExpandableListView 对象为 null

具有RecyclerView的自定义警报对话框

自定义警报对话框不会关闭

如何在自定义警报对话框中刷新内容/ UI

如何在Android中使用网格视图创建自定义警报对话框?

具有多个EditText的自定义警报对话框