Chrome 對於 JavaScript 對話方塊的新策略 —— 建議不要使用 alert(), confirm(), 和 prompt()

鬍子大哈發表於2017-04-18

原文作者: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 感興趣的童鞋,歡迎指點

相關文章