資訊專欄INFORMATION COLUMN
摘要：原因分析深入研究當(dāng)瀏覽器檢測(cè)到非用戶操作產(chǎn)生的新彈出窗口，則會(huì)對(duì)其進(jìn)行阻止。但是，被瀏覽器攔截我們代碼中要彈出的窗口并不是程序員所希望的。
現(xiàn)象
最近在做項(xiàng)目的時(shí)候碰到了使用window.open被瀏覽器攔截的情況，搞得人無(wú)比郁悶啊，雖然在自己的環(huán)境可以對(duì)頁(yè)面進(jìn)行放行，但是對(duì)用戶來(lái)說(shuō)，不能要求用戶都來(lái)通過(guò)攔截。何況當(dāng)出現(xiàn)攔截時(shí)，很多小白根本不知道發(fā)生了啥，不知道在哪里看被攔截的頁(yè)面，簡(jiǎn)直悲催啊~~。
另外，可以發(fā)現(xiàn)，當(dāng)window.open為用戶觸發(fā)事件內(nèi)部或者加載時(shí)，不會(huì)被攔截，一旦將彈出代碼移動(dòng)到ajax或者一段異步代碼內(nèi)部，馬上就出現(xiàn)被攔截的表現(xiàn)了。
原因分析&深入研究
當(dāng)瀏覽器檢測(cè)到非用戶操作產(chǎn)生的新彈出窗口，則會(huì)對(duì)其進(jìn)行阻止。因?yàn)闉g覽器認(rèn)為這不是一個(gè)用戶希望看到的頁(yè)面。
比如對(duì)js中直接執(zhí)行的，如下代碼：
js code:
// 直接打開一個(gè)頁(yè)面
window.open("http://www.baidu.com", "_blank");
瀏覽器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7
是否阻止彈出 N N Y Y Y 而對(duì)于如下代碼:
js code:
document.body.addEventListener("click", function() {
window.open("http://www.baidu.com", "_blank");
});
所有瀏覽器都不會(huì)攔截。
綜上所述，各瀏覽器對(duì)攔截時(shí)機(jī)的判斷不一致，而對(duì)于放在ajax回調(diào)中的代碼，反應(yīng)又不相同了，這里就不再贅述。但是，被瀏覽器攔截我們代碼中要彈出的窗口并不是程序員所希望的。
解決方案：
1、使用a標(biāo)簽替代
給出如下函數(shù)，將此函數(shù)綁定到click的事件回調(diào)中，就可以避免大部分瀏覽器對(duì)窗口彈出的攔截：
js code:
function newWin(url, id) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
a.setAttribute("id", id);
// 防止反復(fù)添加
if(!document.getElementById(id)) document.body.appendChild(a);
a.click();
}
2、使用form的submit方法打開一個(gè)頁(yè)面
這種方法需要構(gòu)造一個(gè)from，然后由js代碼觸發(fā)form的submit，將表單提交到一個(gè)新的頁(yè)面，代碼較長(zhǎng)，在這里就不寫了，大家知道有這種方案就行了。
大家注意，以上兩種方法不適合放在ajax的回調(diào)函數(shù)中，如果放在回調(diào)函數(shù)中，依然會(huì)被瀏覽器攔截。
3、終極解決方案--先彈出窗口，然后重定向
第三種方案，其實(shí)是一種變通方案，核心思想是:先通過(guò)用戶點(diǎn)擊打開頁(yè)面，然后再對(duì)頁(yè)面進(jìn)行重定向。示例代碼如下。
js code:
xx.addEventListener("click", function () {
// 打開頁(yè)面，此處最好使用提示頁(yè)面
var newWin = window.open("loading page");
ajax().done(function() {
// 重定向到目標(biāo)頁(yè)面
newWin.location.href = "target url";
});
});
以上方法其實(shí)是打開了兩個(gè)地址，所以建議大家打開第一個(gè)地址的時(shí)候給出一個(gè)類似‘當(dāng)前頁(yè)面正在加載中，請(qǐng)稍后。。’的簡(jiǎn)單提示頁(yè)，這樣可以避免打開兩次真正的目標(biāo)頁(yè)面，讓用戶察覺到頁(yè)面的重定向。
解決方法二：
點(diǎn)擊彈窗
該方法弊端：
實(shí)測(cè)能解決大部分瀏覽器的攔截問(wèn)題，但是解決不了安全軟件的攔截（360不會(huì)攔截，但是QQ管家會(huì)攔截）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54210.html
摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在事件執(zhí)行后，才去彈出來(lái)的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過(guò)下面的方法來(lái)避免先用打開一個(gè)窗口，然后修改地址。 最近公司開發(fā)的一個(gè)項(xiàng)目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會(huì)在當(dāng)前窗口直接打開，影響用戶體驗(yàn)，嘗試各種方案和百...
摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在事件執(zhí)行后，才去彈出來(lái)的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過(guò)下面的方法來(lái)避免先用打開一個(gè)窗口，然后修改地址。 最近公司開發(fā)的一個(gè)項(xiàng)目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會(huì)在當(dāng)前窗口直接打開，影響用戶體驗(yàn)，嘗試各種方案和百...
摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時(shí)時(shí)間不能太短，否則也會(huì)被攔截。我們會(huì)遇到想要彈出一個(gè)窗口，可是卻是在事件執(zhí)行后，才去彈出來(lái)的，這時(shí)就會(huì)被瀏覽器攔截，我們可以通過(guò)下面的方法來(lái)避免先用打開一個(gè)窗口，然后修改地址。 最近公司開發(fā)的一個(gè)項(xiàng)目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會(huì)在當(dāng)前窗口直接打開，影響用戶體驗(yàn)，嘗試各種方案和百...
摘要：目前就不能避免被攔截了，只能通知用戶，讓用戶去給被攔截的頁(yè)面新添加信任。判斷跳轉(zhuǎn)頁(yè)面是否被攔截了。如果已經(jīng)攔截，就給他用戶提示提示的方式可以是引導(dǎo)用戶去解決被攔截問(wèn)題添加信任您的支付界面窗口已經(jīng)被瀏覽器攔截 知識(shí)簡(jiǎn)說(shuō) window.open 命令在用戶操作(trusted events)時(shí), 才會(huì)正常的打開應(yīng)該頁(yè)面而不會(huì)被瀏覽器攔截 ps : 什么是 trusted events tr...
閱讀 3664·2021-09-22 15:15
閱讀 3567·2021-08-12 13:24
閱讀 1314·2019-08-30 15:53
閱讀 1826·2019-08-30 15:43
閱讀 1188·2019-08-29 17:04
閱讀 2798·2019-08-29 15:08
閱讀 1586·2019-08-29 13:13
閱讀 3091·2019-08-29 11:06
