瀏覽器攔截打開新窗口狀況總結

在打開一個新窗口時,因爲瀏覽器的安全機制,用戶未始終容許的狀況下,可能會觸發到瀏覽器攔截,沒法正常直接彈出。git

網上有不少給出解決方案的隻言片語,不夠全面,因此針對本身遇到的問題作了詳細的狀況分析。總結成文,避免之後混淆。github

只分析使用 js 代碼手動打開新窗口的方式。ajax

測試代碼用例在此瀏覽器

幾種打開新窗口的方式

  1. window.open()
  2. 創造 a 連接,手動觸發 a.click()
  3. 創造 form 表單,手動觸發 form.submit() (創造 form 表單,添加 button 子元素,手動觸發 button.click() 狀況相同,不作區分)

調用情形分組結果

使用 Chrome(70)、Firefox(63)、Edge、IE(9-11) 做爲測試瀏覽器,對如下列舉的打開新窗口的情形作測試。安全

x 表示被攔截,√ 表示新窗口正確打開異步

直接打開

即頁面加載後直接調用打開新窗口代碼post

方式 Chrome Firefox Edge IE
window.open() x x x x
a.click() x x x x
form.submit() x x x x

用戶點擊行爲

  1. 按鈕點擊後直接打開測試

    即在按鈕被點擊的回調中,直接調用打開新窗口的代碼code

    方式 Chrome Firefox Edge IE
    window.open()
    a.click()
    form.submit()
  2. 按鈕點擊後延時打開orm

    即在按鈕被點擊的回調中,經過 setTimeout 執行打開新窗口代碼

    方式 Chrome Firefox Edge IE
    window.open() × ×
    a.click() × ×
    form.submit() × ×
  3. 按鈕點擊後在異步請求回調中打開

    即在按鈕被點擊的回調中,發送請求,並在請求的回調中執行打開新窗口代碼

    方式 Chrome Firefox Edge IE
    window.open() x x x x
    a.click() x x x x
    form.submit() x x x x

用戶鍵盤行爲

咱們以 input 元素進行測試(其餘元素其餘鍵盤事件也有相同效果),由於最可能使用的狀況爲 input 中使用回車打開新窗口。

  1. input keydown後直接打開

    方式 Chrome Firefox Edge IE
    window.open() x x
    a.click() x x
    form.submit() x x

    其中 ie九、ie10雖然會彈出攔截彈窗提示,可是能打開新窗口

  2. 按鈕點擊後延時打開

    方式 Chrome Firefox Edge IE
    window.open() x x x
    a.click() x x x
    form.submit() x x x
  3. 按鈕點擊後在異步請求回調中打開

    方式 Chrome Firefox Edge IE
    window.open() x x x x
    a.click() x x x x
    form.submit() x x x x

規則總結

  1. 就參與測試的瀏覽器,三種打開新窗口的方式對攔截結果沒有影響。
  2. 全部瀏覽器都不容許非用戶操做引發的打開新窗口。
  3. 全部瀏覽器都不容許在異步 ajax 請求中打開新窗口。
  4. Edge 和 IE 不容許在 setTimeout 中打開新窗口,Chrome、Firefox 容許在用戶操做事件中的 setTimeout 中打開新窗口。
  5. Firefox 和 IE 不容許在用戶鍵盤操做事件中打開新窗口

解決方案

  1. 須要在異步 ajax 請求中打開新窗口的可使用請求前打開新窗口,請求拿到結果後再修改窗口地址的方式。
  2. 須要在鍵盤迴車事件中打開新窗口的推薦使用 form 表單包裝並添加 button 的方式,回車觸發默認的 submit 事件進行新窗口的打開。
相關文章
相關標籤/搜索