首页 >web前端 >js教程 >如何针对未保存的更改改进 OnBeforeUnload 对话框?

如何针对未保存的更改改进 OnBeforeUnload 对话框?

Barbara Streisand
Barbara Streisand原创
2024-12-15 11:44:18681浏览

How Can I Improve the OnBeforeUnload Dialog for Unsaved Changes?

自定义 OnBeforeUnload 对话框:综合解决方案

onbeforeunload 事件是在离开页面之前警告用户未保存更改的重要工具。但是,此事件显示的默认对话框可能不是最佳的,从而提示需要进行自定义。不幸的是,修改默认对话框是不可行的。

解决方案:在限制范围内工作

要使用现有对话框,请将字符串分配给 window 的 returnValue 属性.event:

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

附加说明jQuery

  • 避免在 onbeforeunload 中使用 jQuery 的事件处理程序,因为它们可能会触发多个事件。
  • 如果使用 jQuery,请使用通用绑定语法:
$(window).bind('beforeunload', function() {} );

自定义消息Chrome

请注意,自 Chrome 版本 51 起,onbeforeunload 对话框中的自定义消息已被弃用。

结论

虽然 onbeforeunload 对话框不能这些解决方案是完全定制的,提供了有效的方法来增强用户体验并传达有关未保存的重要信息变化。

以上是如何针对未保存的更改改进 OnBeforeUnload 对话框?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn