資訊專欄INFORMATION COLUMN
摘要：在打開一個(gè)新窗口時(shí)，由于瀏覽器的安全機(jī)制，用戶未始終允許的情況下，可能會(huì)觸發(fā)到瀏覽器攔截，無法正常直接彈出。只分析使用代碼手動(dòng)打開新窗口的方式。所有瀏覽器都不允許非用戶操作引起的打開新窗口。
在打開一個(gè)新窗口時(shí)，由于瀏覽器的安全機(jī)制，用戶未始終允許的情況下，可能會(huì)觸發(fā)到瀏覽器攔截，無法正常直接彈出。
網(wǎng)上有很多給出解決方案的只言片語，不夠全面，所以針對自己遇到的問題做了詳細(xì)的情況分析。總結(jié)成文，避免以后混淆。
只分析使用 js 代碼手動(dòng)打開新窗口的方式。
測試代碼用例在此
幾種打開新窗口的方式window.open()
創(chuàng)造 a 鏈接，手動(dòng)觸發(fā) a.click()
創(chuàng)造 form 表單，手動(dòng)觸發(fā) form.submit() (創(chuàng)造 form 表單，添加 button 子元素，手動(dòng)觸發(fā) button.click() 情況相同，不做區(qū)分)
調(diào)用情形分組結(jié)果使用 Chrome（70）、Firefox（63）、Edge、IE（9-11） 作為測試瀏覽器，對以下列舉的打開新窗口的情形做測試。
x 表示被攔截，√ 表示新窗口正確打開
直接打開即頁面加載后直接調(diào)用打開新窗口代碼
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | x | x | x | x |
| a.click() | x | x | x | x |
| form.submit() | x | x | x | x |
按鈕點(diǎn)擊后直接打開
即在按鈕被點(diǎn)擊的回調(diào)中，直接調(diào)用打開新窗口的代碼
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | √ | √ | √ | √ |
| a.click() | √ | √ | √ | √ |
| form.submit() | √ | √ | √ | √ |
按鈕點(diǎn)擊后延時(shí)打開
即在按鈕被點(diǎn)擊的回調(diào)中，通過 setTimeout 執(zhí)行打開新窗口代碼
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | √ | √ | × | × |
| a.click() | √ | √ | × | × |
| form.submit() | √ | √ | × | × |
按鈕點(diǎn)擊后在異步請求回調(diào)中打開
即在按鈕被點(diǎn)擊的回調(diào)中，發(fā)送請求，并在請求的回調(diào)中執(zhí)行打開新窗口代碼
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | x | x | x | x |
| a.click() | x | x | x | x |
| form.submit() | x | x | x | x |
我們以 input 元素進(jìn)行測試（其他元素其他鍵盤事件也有相同效果），因?yàn)樽羁赡苁褂玫那闆r為 input 中使用回車打開新窗口。
input keydown后直接打開
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | √ | x | √ | x |
| a.click() | √ | x | √ | x |
| form.submit() | √ | x | √ | x |
其中 ie9、ie10雖然會(huì)彈出攔截彈窗提示，但是能打開新窗口
按鈕點(diǎn)擊后延時(shí)打開
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | √ | x | x | x |
| a.click() | √ | x | x | x |
| form.submit() | √ | x | x | x |
按鈕點(diǎn)擊后在異步請求回調(diào)中打開
| 方式 | Chrome | Firefox | Edge | IE |
|---|---|---|---|---|
| window.open() | x | x | x | x |
| a.click() | x | x | x | x |
| form.submit() | x | x | x | x |
就參與測試的瀏覽器，三種打開新窗口的方式對攔截結(jié)果沒有影響。
所有瀏覽器都不允許非用戶操作引起的打開新窗口。
所有瀏覽器都不允許在異步 ajax 請求中打開新窗口。
Edge 和 IE 不允許在 setTimeout 中打開新窗口，Chrome、Firefox 允許在用戶操作事件中的 setTimeout 中打開新窗口。
Firefox 和 IE 不允許在用戶鍵盤操作事件中打開新窗口
解決方案需要在異步 ajax 請求中打開新窗口的可以使用請求前打開新窗口，請求拿到結(jié)果后再修改窗口地址的方式。
需要在鍵盤回車事件中打開新窗口的推薦使用 form 表單包裝并添加 button 的方式，回車觸發(fā)默認(rèn)的 submit 事件進(jìn)行新窗口的打開。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98968.html
摘要：之前的項(xiàng)目，有個(gè)功能是下載文件，這里只要在瀏覽器輸入就會(huì)下載那個(gè)文件了。 之前的項(xiàng)目，有個(gè)功能是下載文件，這里只要在瀏覽器輸入 url 就會(huì)下載那個(gè)文件了。當(dāng)時(shí)我只是簡單得使用 window.open ，但是卻會(huì)被瀏覽器進(jìn)行攔截，要手動(dòng)開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結(jié)一下 解決下載功能 這里就先說解決下載功能的方法，通過同事...
摘要：之前的項(xiàng)目，有個(gè)功能是下載文件，這里只要在瀏覽器輸入就會(huì)下載那個(gè)文件了。 之前的項(xiàng)目，有個(gè)功能是下載文件，這里只要在瀏覽器輸入 url 就會(huì)下載那個(gè)文件了。當(dāng)時(shí)我只是簡單得使用 window.open ，但是卻會(huì)被瀏覽器進(jìn)行攔截，要手動(dòng)開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結(jié)一下 解決下載功能 這里就先說解決下載功能的方法，通過同事...
摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在事件執(zhí)行后，才去彈出來的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個(gè)窗口，然后修改地址。 最近公司開發(fā)的一個(gè)項(xiàng)目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會(huì)在當(dāng)前窗口直接打開，影響用戶體驗(yàn)，嘗試各種方案和百...
閱讀 3033·2021-10-13 09:39
閱讀 1880·2021-09-02 15:15
閱讀 2439·2019-08-30 15:54
閱讀 1803·2019-08-30 14:01
閱讀 2602·2019-08-29 14:13
閱讀 1411·2019-08-29 13:10
閱讀 2731·2019-08-28 18:15
閱讀 3870·2019-08-26 10:20
