前一篇在说了一下dialog
在chrome
的使用方法,这里就顺带着以chrome
为例,来看看dialog
家族的前世今生。
1. dialog家族?
dialog
家族,就认为是弹窗家族吧,那么我们经常用到的弹窗有哪些呢?他们在浏览器的发展史上,都经历了哪些变更呢?
这里,我们就以chrome
为例,来简单的说说,dialog
的发展史,可能不全,就当是个娱乐吧。
首先dialog
家族,主要包含的成员有:alert
、confirm
、prompt
、print
、onbeforeunload
、dialog
,可能还有一些其他的,不过不常用,这里就不一一列举了(关键是,家族史中,并没有说到其他的)。
2. 发展史
1: chrome 37
; 新增dialog
的Element
元素(在2017年12月14号,dialog
才被纳入规范)
2: chrome 42
;移除showModalDialog
的全局方法(chrome
给的解释,是因为特别消耗内存,在2017年12月14号的HTML5.2
规范中,该方法被移除)。
3: chrome 46
;alert
,confirm
,prompt
,print
阻塞JS
执行(防止JS
在弹窗时执行导致的逻辑混乱)。
4: chrome 51
;新增onbeforeunload
的确认弹窗(刷新和离开的时候,弹出提示框,让用户确认是否离开,在移动端表现不一,建议不要在移动端使用)。
5: chrome 52
;当alert
等类型的模态框出现时,阻塞CSS2
动画:示例;
6: chrome 56
;prompt
方法,只在当前活动的页面,才会被执行:示例,如果prompt
被禁止之后,可以在console
的控制台看到warning
提示。
7: chrome 59
;浏览器用户授权确认框,如果需要获取您的地址等信息,会弹出一个授权框,让用户选择是否同意授权,选择的授权结果与当前域名进行绑定然后缓存在浏览器,之后就使用之前的授权结果,缓存记录大概一个周,如果想要测试修改这个缓存的话,可以清理掉浏览器的缓存。 第二个改动:dialog
默认display
属性由inline —> block
。
8: chrome 60
;只有在触摸动作的时候,才会执行beforeunload
,什么意思呢,就是说,如果某个页面,有绑定beforeunload
事件,但是当到了这个页面之后,没有做任何动作,没有在页面操作,那么刷新,或者离开当前页面,是不会触发beforeunload
事件的回调的:示例。
9: chrome 61
;在H5
的全屏状态下,如果触发了alert
等,那么将会退出全屏状态。
10: chrome 64
;alert
方法,只在当前活动的页面,显示(与前面的prompt
一样,不新增示例了)。
11: chrome
(未发布); 给dialog.show()
和dialog.showModal()
;增加参数传递,(先一步查看)。
结束。
3. 总结
以上的历史,都是以chrome为例,其他浏览器,甚至webkit内核的浏览器,表现都可能不一致,所以仅供娱乐吧。
如有疑问,欢迎留言讨论。