javascript - 离开页面前询问用户确认的最佳方式

标签 javascript javascript-events

就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the help center寻求指导。




10年前关闭。




我目前正在构建一个注册页面,如果用户离开,我想弹出一个 CSS 框,询问他是否确定。我可以使用确认框来完成这个壮举,但是客户说它们太丑了。我尝试过使用 unload 和 beforeunload,但两者都无法阻止页面被重定向。使用这些事件,我返回 false,所以除了返回 false 之外,也许还有其他方法可以取消?

我的另一个解决方案是将他们重定向到另一个有我的弹出窗口的页面,但问题是如果他们确实想离开该页面,并且这不是错误,他们会丢失他们最初尝试的页面要去。如果我是用户,那会激怒我。

最后一个解决方案是真正的弹出窗口。我唯一不喜欢的是主窗口将有他们的目标页面,而弹出窗口将有我的页面。在我看来,它看起来不连贯。最重要的是,我会担心弹出窗口拦截器。

只是为了补充大家的评论。我知道阻止用户退出页面很烦人,我认为不应该这样做。现在我正在使用一个确认框。发生的情况是,它实际上并没有“阻止”用户离开,客户真正想做的是在用户对注册有疑问时提出建议。如果用户在注册过程中途并且由于某种原因离开,客户希望向用户提供研讨会的免费优惠券(该客户正在销售研讨会)以希望说服用户注册。客户的印象是,由于用户已经在表单上,​​他正在考虑注册,因此也许他正在注册的研讨会将是让用户注册的最终插入力。理想情况下,我不必阻止用户离开,这同样好,我认为更好的是如果我可以暂停卸载过程。也许是 sleep 命令?我真的不必让用户留在页面上,因为无论哪种方式他们都会离开去另一个页面。

此外,正如人们所说,这是一个可怕的标题,所以如果有人知道一个更好的标题,如果他们能将标题更改为不那么垃圾邮件发送者邀请的东西,我将非常感激。

最佳答案

当我看到“阻止用户”这两个字时,我开始痛苦地哭泣。 从不 阻止用户,只帮助他们。

如果他们看到您的注册页面并跑掉,这是他们的选择 .如果他们已经填写了一些数据(因为他们可能会意外地离开),则会弹出一个 javascript 确认框,但不要这样做。如果他们没有碰过表格,请不要理会他们——他们不想填写您的表格。

看看其他吸引用户的方法。如果您的表单又大又吓人,请将其分解为易于管理的简单 block ,或者更好的是,将事情简化到用户只在需要时才向您提供数据。例如,在您想向他们发布内容之前,您可能不需要他们的地址。

通过将其分成多个部分,您可以用一个简单的形式将它们 Hook ,一旦他们投入了时间,他们将更有可能继续这个过程。

但不要骚扰用户。如果他们不想注册,用弹出窗口和 jaavscript 对话纠缠他们只会将他们完全赶出网站。

考虑到这一点,假设您只是想阻止人们填写表格,那么有几个选项可以真正帮助人们:

  • 检测表单是否已更改并询问他们一个简单的 confirm()信息。

    这就是你所能做的。 CSS“弹出窗口”不起作用,因为您无法控制*卸载事件中的窗口位置。

    *您可以在所有页面的链接上放置一个事件监听器来触发某些东西以检查表单,但这仅在用户单击其中一个链接时才有帮助。例如,如果用户单击返回或关闭窗口,这将无济于事。您可以同时使用 CSS 和 javascript,但结果会有些困惑。
  • 在幕后坚持表单的状态。

    #1 的扩展。与其与用户争吵,不如让他们去他们想去的地方,但将表单的内容保存到 session 或 cookie(如果它适合的话)并在页面上放置一些东西(比如页面顶部的 SO 的橙色提示栏) 提醒他们已开始填写表格并为他们提供返回表格的链接。

    当他们单击该链接时,您将 cookie(或 session )中的数据加载回表单并让他们继续。这有一个明显的好处,就是让他们在您的网站上做他们喜欢做的事,并保证数据的安全...... ish。

    如果他们不回来并且他们的 cookie/ session 过期,那是他们的错。你只能把马牵到水边。强制它喝水不是你的工作。
  • 关于javascript - 离开页面前询问用户确认的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2905838/

    相关文章:

    javascript - 如何访问相邻表格单元格中的文本?

    javascript - dispatchEvent 不工作

    javascript - 如何从 Java 脚本对象中引发自定义事件

    javascript - 如何在 AngularJS 中打开 .exe 文件?

    javascript - 如何创建 Angular 4 项目而不是 Angular 5?

    javascript - 如何使用 Internet Explorer 的 javascript 获取鼠标指针位置?

    javascript - 确定鼠标在窗口焦点事件上的位置

    javascript-events - 如何在keydown中停止按键事件

    javascript - 鼠标位置的背景视频比较

    JavaScript SetTimeout 改变背景颜色