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

Steven 發布于2019-08-23 12:43 / 3572人閱讀

摘要：在打開一個新窗口時，由于瀏覽器的安全機制，用戶未始終允許的情況下，可能會觸發到瀏覽器攔截，無法正常直接彈出。只分析使用代碼手動打開新窗口的方式。所有瀏覽器都不允許非用戶操作引起的打開新窗口。

在打開一個新窗口時，由于瀏覽器的安全機制，用戶未始終允許的情況下，可能會觸發到瀏覽器攔截，無法正常直接彈出。

網上有很多給出解決方案的只言片語，不夠全面，所以針對自己遇到的問題做了詳細的情況分析。總結成文，避免以后混淆。

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

測試代碼用例在此

幾種打開新窗口的方式

window.open()

創造 a 鏈接，手動觸發 a.click()

創造 form 表單，手動觸發 form.submit() (創造 form 表單，添加 button 子元素，手動觸發 button.click() 情況相同，不做區分)

調用情形分組結果

使用 Chrome（70）、Firefox（63）、Edge、IE（9-11）作為測試瀏覽器，對以下列舉的打開新窗口的情形做測試。

x 表示被攔截，√ 表示新窗口正確打開

直接打開

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

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

用戶點擊行為

按鈕點擊后直接打開

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

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

按鈕點擊后延時打開

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

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

按鈕點擊后在異步請求回調中打開

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

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

用戶鍵盤行為

我們以 input 元素進行測試（其他元素其他鍵盤事件也有相同效果），因為最可能使用的情況為 input 中使用回車打開新窗口。

input keydown后直接打開

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

其中 ie9、ie10雖然會彈出攔截彈窗提示，但是能打開新窗口

按鈕點擊后延時打開

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

按鈕點擊后在異步請求回調中打開

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

規則總結

就參與測試的瀏覽器，三種打開新窗口的方式對攔截結果沒有影響。

所有瀏覽器都不允許非用戶操作引起的打開新窗口。

所有瀏覽器都不允許在異步 ajax 請求中打開新窗口。

Edge 和 IE 不允許在 setTimeout 中打開新窗口，Chrome、Firefox 允許在用戶操作事件中的 setTimeout 中打開新窗口。

Firefox 和 IE 不允許在用戶鍵盤操作事件中打開新窗口

解決方案

需要在異步 ajax 請求中打開新窗口的可以使用請求前打開新窗口，請求拿到結果后再修改窗口地址的方式。

需要在鍵盤回車事件中打開新窗口的推薦使用 form 表單包裝并添加 button 的方式，回車觸發默認的 submit 事件進行新窗口的打開。

GPU云服務器云服務器新窗口打開打開新窗口 ajax打開新窗口 js跳轉新窗口打開

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98968.html

js 打開新窗口方式

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結一下解決下載功能這里就先說解決下載功能的方法，通過同事...

mgckid 2019-08-21 17:21 評論0 收藏0
js 打開新窗口方式

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結一下解決下載功能這里就先說解決下載功能的方法，通過同事...

Jensen 2019-08-01 17:54 評論0 收藏0
window.open 打開新窗口被攔截的解決方案

摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時時間不能太短，否則也會被攔截。我們會遇到想要彈出一個窗口，可是卻是在事件執行后，才去彈出來的，這時就會被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個窗口，然后修改地址。最近公司開發的一個項目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會在當前窗口直接打開，影響用戶體驗，嘗試各種方案和百...

JeOam 2019-08-22 18:16 評論0 收藏0