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

4,722 阅读3分钟

原文作者:Chromium team

编译:胡子大哈

翻译原文:huziketang.com/blog/posts/…

英文连接: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 感兴趣的童鞋,欢迎指点