Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

自 1995 年 JavaScript 诞生之初,就包含了 3 个方法 alert()confirm()prompt()。在随后的 Chrome 版本中,Chrome 团队一直在修改原生弹窗的表现。

但是这种阻断式的弹窗总被各种广告网站恶意使用,因为只要弹窗出现,JavaScript 引擎就会一直等待,知道用户操作。所以这种原生弹窗的最大用处不是用来提示用户信息,而是伤害用户(Tech support scammers use subdomain trick to defeat blocking)

因此 Chromium 团队强烈建议你不要使用这类弹窗。

而弹窗和 onbeforeunload 事件相结合之后那简直就是大杀器,而此类弹窗经常被用来提示浏览者xxxx。

Chromium 团队在 Chrome 51 中移除了对 onbeforeunload 弹窗的支持。在此之前 Safari 9.1 和 Firefox 4 早就已经移除了。当我们在 onbeforeunload 事件中调用 alert 时,会在 devtools 中产生警告:

Blocked alert('before unload') during beforeunload.

clipboard.png

除此之外,alert()confirm()prompt() 的行为也做了改变,不再作为顶级的原生弹窗而存在,当弹窗所在的浏览器标签被切走后,它们会自动消失。(Safari 9.1 说:“你怎么到现在才来学啊!”)

Chromium 在官方博客中说到:

对于 alert()/confirm()/prompt() 我们有很多替代的选择。 譬如需要弹个通知消息时(日历应用)可以用Notifications API。 获取用户输入可以用 HTML 中的 <dialog> 元素。 对于 XSS proofs-of-concept 则可用 console.log(document.origin)

<dialog> 作为 HTML 5.2 的元素,目前除了 Chrome 和 Opara 以外,其它浏览器均未支持。但是 Google 提供了一个 dialog-polyfill

一个最简单的例子:

<dialog>This is da dialog!</dialog>

这段 html 什么也不显示,开发者需要使用 javascript 的 API .show().close() 来控制 dialog 的显示和隐藏。

<dialog>
  <p>This is da dialog!</p>
  <button id="close">Close</button>
</dialog>

<button id="show">Open Dialog!</button>
var dialog = document.querySelector('dialog');

document.querySelector('#show').onclick = function() {
  dialog.show();
};

document.querySelector('#close').onclick = function() {
  dialog.close();
};

https://jsfiddle.net/m1dzstxo/

点击按钮会出现一个弹窗(非常丑)

clipboard.png

不过 dialog 作为一个 html 标签,是可以使用 css 的。我们给它加一段 css 样式:

dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

https://jsfiddle.net/m1dzstxo/1/

再点击按钮,弹窗了一个稍微漂亮点的弹窗:

clipboard.png

我们还可以使用 .showModal() 弹窗一个模态对话框,当我们关闭弹窗时触发 close 事件。我们还可以使用 ESC 键关闭一个弹窗,此时会触发 cancel 事件。和其它所有事件一样,我们可以通过调用 event.preventDefault() 来阻止默认行为。

直接弹窗一个模态窗口是不够友好的,有时我们需要把背景虚化:

clipboard.png

通过使用 CSS 的伪元素 ::backdrop 很容易就可以做到:

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

为什么使用 <dialog> 元素而不是第三方的 javascript 库?

我觉得两者并不冲突,目前大部分 javascript 库都是使用 <div> 来模拟弹窗,当更多的浏览器开始支持 <dialog> 时,第三方的 javascript 库也会考虑使用 <dialog> 作为首先的弹窗方式的,毕竟 <dialog> 是 HTML 5.2 规范中的。

相比 <div> 而言,<dialog> 更大强大,也更加符合规范。比如 <dialog> 的模态弹窗可以保证即使全屏的情况下,弹窗可以保持在最顶层(top-layer)。top-layer 定义在 whatwg 的 Fullscreen API 中,可以配合伪元素 ::backdrop 以及伪类 :fullscreen 一起使用。

开发面向未来的前端,当有 polyfill 方案时,我们应该总是使用最新标准。

阅读 9.7k

推荐阅读
前端进阶
用户专栏

680 人关注
156 篇文章
专栏主页
目录