自 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.
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/
点击按钮会出现一个弹窗(非常丑)
https://jsfiddle.net/m1dzstxo/1/
再点击按钮,弹窗了一个稍微漂亮点的弹窗:
原文作者:justjavac
原文地址: https://segmentfault.com/a/1190000009954183
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。