资讯专栏INFORMATION COLUMN

Chrome对于JavaScript 对话框的新策略——建议不要使用 alert, confirm,

SimonMa / 3114人阅读

摘要:正因如此,团队强烈建议不要使用对话框。替代方案有很多替代对话框的方案。对于对话框目前的计划是需要用户的许可才能显示这将会改变的调用方法。网友评论此文一出,引起众开发者的热议。显然,网友们反对声音大于支持的声音。

原文作者:Chromium team
编译:胡子大哈

翻译原文:http://huziketang.com/blog/posts/detail?postId=58eef0dca58c240ae35bb8e5
英文连接:Chromium policy on JavaScript dialogs

转载请注明出处,保留原文链接以及作者信息

JavaScript 对话框的历史

JavaScript 诞生于 1995 年。第一个版本的 JavaScript 中窗口对象的几个方法是:alert(),confirm(),和 prompt()。

这在当时的环境是很合适的,但是随着时间的推移,同期的 API 对于现代浏览器来讲存在很多问题。因为这种 JavaScript 对话框模式是 app 模式,即此时 JavaScript 引擎是暂停状态,直到得到用户反馈。也正是因为这种 app 模式,在浏览器中很伤用户体验。

正因如此,Chromium 团队强烈建议不要使用 JavaScript 对话框。

替代方案

有很多替代对话框的方案。

对于替换 alert()/confirm()/prompt(),有很多可选方法。需要提醒用户(如日历网站),那么可以使用 Notifications API。需要获取用户输入,可以使用 HTML

element。需要 XSS 概念验证,可以使用开发工具的 console.log(document.origin)

至于 onbeforeunload,需要注意的是它已经不可靠了。正如 Ilya Grigorik 所指出的:“在移动平台上,你不能依赖于 pagehidebeforeunloadunload 事件”。如果你想保存状态,应该使用 Page Visibility API。

改变

网页中指定 onbeforeunload 字符串的功能在 Chrome 51 中就删除了(从 Safari 9.1 和 Firefox 4 版本以后它们也删除了)。

alert()/confirm()/prompt() 对话框也正在修改,不同于 app 模式,当浏览器 tab 发生切换时,它们会自动消失(Safari 9.1 已经这么做了)。这一功能在金丝雀版和开发者版已经完全支持了,在 beta 和 稳定版中部分支持。但是可以肯定的是将来一定会支持的更多。

对于 beforeload 对话框目前的计划是需要用户的许可才能显示(这将会改变 beforeload 的调用方法)。在这一点上 Chromium 和 Firefox 达成了一致,在 Firefox 44 中将会应用这一变化)。

正是因为发生了这些变化,如果你的网站使用了对话框(dialog),强烈建议你使用前面所提到的那些替代方案,以防对你产生影响。

网友评论

Chromium 此文一出,引起众开发者的热议。这里挑出一些典型的评论和观点。

Notification API 是另一回事,你想取消就取消好了,但是谴责旧的、这么好用的 alert() 就是你的不对了。

这会使得使用起来更麻烦,原来的 alert 方法很简单。

做成 page 模式的就好了,就像 Firefox 7 年前做的那样,很少的改变,大家不需要重写代码。

我查了文中给的关于 HTML

element 的链接。里面的文章说,这是一种经验技术。我又查了浏览器情况,发现只有 Chrome 和 Opera 支持!

越早变越好,现在已经过去了好几天了。

...

显然,网友们反对声音大于支持的声音。不知道你是怎么看呢?欢迎大家一起讨论。

我最近正在写一本《React.js 小书》,对 React.js 感兴趣的童鞋,欢迎指点。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82540.html

相关文章

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

    摘要:在随后的版本中,团队一直在修改原生弹窗的表现。所以这种原生弹窗的最大用处不是用来提示用户信息,而是伤害用户。团队在中移除了对弹窗的支持。获取用户输入可以用中的元素。作为的元素,目前除了和以外,其它浏览器均未支持。 自 1995 年 JavaScript 诞生之初,就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中,Chrome...

    philadelphia 评论0 收藏0
  • JavaScript BOM——“window 对象”的注意要点

    摘要:仅限数值表示新窗口的高度。一个字符串参数,并将其显示给用户,提供两个按钮,一个按钮返回布尔值另一个按钮返回布尔值。 全局作用域 window 在是BOM 的核心对象,他是浏览器的一个实例。 在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。如: var age = 18; function sayAge(){ console.log(window.age);...

    levius 评论0 收藏0
  • JavaScript高级程序设计》(第3版)读书笔记 第8章 BOM

    摘要:仅限数值表示新窗口的高度。此时只要检查这个返回值就可以确定弹窗是否被屏蔽。返回一个布尔值,代表用户选择还是返回一个字符串或者,输入了值并确定,返回字符串,其他方法关闭返回打印查找对话框。 ECMAScript是JavaScript的核心,但如果要在Web中使用JavaScript,那么BOM(浏览器对象模型)则无疑才是真正的核心。 W3C为了把浏览器中JavaScript最基本的部分...

    AWang 评论0 收藏0
  • 温故js系列(11)-BOM

    摘要:确定和取消弹框,按确定返回,按取消或者关闭按钮返回。官方浏览器名返回所使用浏览器的名称。对象有一个属性,表示对象中的记录数。属性描述屏幕的宽度屏幕的高度窗口可以使用的屏幕的宽度窗口可以使用的屏幕的高度对象见温故系列 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:BOM JavaScript-BOM BO...

    xorpay 评论0 收藏0

发表评论

0条评论

SimonMa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<