onbeforeunload 事件显示啥元素？

Posted 2023-05-07

【中文标题】onbeforeunload 事件显示啥元素？

【英文标题】：What element is being displayed onbeforeunload event?onbeforeunload 事件显示什么元素？

【发布时间】：2021-05-20 18:25:19

【问题描述】：

我使用on('beforeunload') 在用户尝试关闭我的页面的选项卡时触发提示。我认为这是一个系统警报，它是really neat。

这是什么类型的元素，是否可以在我的应用程序的其他地方使用这种样式作为警报或提示？我找不到任何关于它的信息。 alert 或 prompt 看起来完全不同。

这是 Safari 上的东西：

这也是 Safari 的“默认”警报，丑 10 倍：

【问题讨论】：

这是来自客户端的内置对话框。这些内置对话框的样式是不可配置的。

【参考方案1】：

prompt 和 alert 对话是浏览器模式。我能想到的所有浏览器实现都不会在 html 页面中显示模式，而是在主窗口顶部显示一个单独的 GUI 对话框；因此模态框超出了文档的范围，并且不能作为样式的目标。

https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#simple-dialogs 的 HTML 生活规范仅规定，在调用 prompt 或 alert 时，消息应该是可配置的。如果任何浏览器实现了为警报模式配置样式的功能，这将超出规范和非标准功能。

简而言之：该规范不包括对话的样式配置，也没有浏览器供应商实现它。

---

也许您可以在页面内创建一个固定元素，在所有其他元素之上，具有所需的样式，并使用一个函数来显示/隐藏它，而不是内置的alert()。

function alert2( msg ) 
    const modal = document.getElementById( 'modal' )
    modal.innerHTML = typeof msg === 'string' ? msg : 'Alert!!'
    modal.style.display = 'block'


...

alert2( 'This is an alert' )