使用 Chrome 偵錯網頁時,意外出現 window.open 失效的狀況。吊詭的是-偵錯是為了抓其他問題,與 window.open 無關,而該網頁運作已久,若 window.open 有問題,根本無法使用,不可能沒被發現。測試過程,window.open 並不是每次都出錯,出錯後重新啟動 Chrome 就會正常,一度讓我懷疑這是 Chrome 的 Bug。
歷經一番比對推敲,終於搞懂是怎麼一回事!
請看以下示範:
將中斷點設在 window.open(),按 F5 繼續執行可以過關。但如果在中斷點按 F10 逐步偵錯,就會遇到彈出式視窗被封鎖的狀況。(先前沒到留意封鎖彈出視窗的提示,才卡關卡這麼久)
瀏覽器只接受使用者點擊動作觸發的 window.open() 是常識!我的 window.open() 寫在 onclick 事件裡,合法性無庸置疑。但 Chrome 似乎認定透過 F10/F11 逐步偵錯呼叫的 window.open() 要歸類成「由程式自行觸發」,因而慘遭封鎖。
回想先前所謂的「時好時壞」,應是有時按 F5,有時按 F10 偵錯才導致不同結果;而重啟 Chrome 後,F12 偵錯工具未開啟,就不會遇到問題,形成重開後恢復正常的假象。至此,真相大白!
順便測了 IE 及 Firefox,驗證唯獨 Chrome 有此行為,日後使用 Chrome 偵錯 window.open() 時要當心。