dialog家族的前世今生

前一篇在说了一下dialogchrome的使用方法,这里就顺带着以chrome为例,来看看dialog家族的前世今生。

1. dialog家族?

dialog家族,就认为是弹窗家族吧,那么我们经常用到的弹窗有哪些呢?他们在浏览器的发展史上,都经历了哪些变更呢?

这里,我们就以chrome为例,来简单的说说,dialog的发展史,可能不全,就当是个娱乐吧。

首先dialog家族,主要包含的成员有:alertconfirmpromptprintonbeforeunloaddialog,可能还有一些其他的,不过不常用,这里就不一一列举了(关键是,家族史中,并没有说到其他的)。

2. 发展史

1: chrome 37 ; 新增dialogElement元素(在2017年12月14号,dialog才被纳入规范)

2: chrome 42 ;移除showModalDialog的全局方法(chrome给的解释,是因为特别消耗内存,在2017年12月14号的HTML5.2规范中,该方法被移除)。

3: chrome 46alertconfirmpromptprint阻塞JS执行(防止JS在弹窗时执行导致的逻辑混乱)。

4: chrome 51 ;新增onbeforeunload的确认弹窗(刷新和离开的时候,弹出提示框,让用户确认是否离开,在移动端表现不一,建议不要在移动端使用)。

5: chrome 52 ;当alert等类型的模态框出现时,阻塞CSS2动画:示例

6: chrome 56prompt方法,只在当前活动的页面,才会被执行:示例,如果prompt被禁止之后,可以在console的控制台看到warning提示。

7: chrome 59 ;浏览器用户授权确认框,如果需要获取您的地址等信息,会弹出一个授权框,让用户选择是否同意授权,选择的授权结果与当前域名进行绑定然后缓存在浏览器,之后就使用之前的授权结果,缓存记录大概一个周,如果想要测试修改这个缓存的话,可以清理掉浏览器的缓存。 第二个改动:dialog默认display属性由inline —> block

8: chrome 60 ;只有在触摸动作的时候,才会执行beforeunload,什么意思呢,就是说,如果某个页面,有绑定beforeunload事件,但是当到了这个页面之后,没有做任何动作,没有在页面操作,那么刷新,或者离开当前页面,是不会触发beforeunload事件的回调的:示例

9: chrome 61 ;在H5的全屏状态下,如果触发了alert等,那么将会退出全屏状态。

10: chrome 64alert方法,只在当前活动的页面,显示(与前面的prompt一样,不新增示例了)。

11: chrome (未发布); 给dialog.show()dialog.showModal();增加参数传递,(先一步查看)。

结束。

3. 总结

以上的历史,都是以chrome为例,其他浏览器,甚至webkit内核的浏览器,表现都可能不一致,所以仅供娱乐吧。

参考:chrome platform status

如有疑问,欢迎留言讨论。

本文地址:http://www.zhangyunling.com/?p=798

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>