現(xiàn)象
最近在做項(xiàng)目的時(shí)候碰到了使用window.open被瀏覽器攔截的情況,搞得人無比郁悶啊,雖然在自己的環(huán)境可以對頁面進(jìn)行放行,但是對用戶來說,不能要求用戶都來通過攔截。何況當(dāng)出現(xiàn)攔截時(shí),很多小白根本不知道發(fā)生了啥,不知道在哪里看被攔截的頁面,簡直悲催啊~~。
另外,可以發(fā)現(xiàn),當(dāng)window.open為用戶觸發(fā)事件內(nèi)部或者加載時(shí),不會被攔截,一旦將彈出代碼移動到ajax或者一段異步代碼內(nèi)部,馬上就出現(xiàn)被攔截的表現(xiàn)了。
原因分析&深入研究
當(dāng)瀏覽器檢測到非用戶操作產(chǎn)生的新彈出窗口,則會對其進(jìn)行阻止。因?yàn)闉g覽器認(rèn)為這不是一個(gè)用戶希望看到的頁面。
比如對js中直接執(zhí)行的,如下代碼:
js code:
// 直接打開一個(gè)頁面
window.open('//www.baidu.com', '_blank');
瀏覽器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7
是否阻止彈出 N N Y Y Y 而對于如下代碼:
js code:
document.body.addEventListener('click', function() {
window.open('//www.baidu.com', '_blank');
});
所有瀏覽器都不會攔截。
綜上所述,各瀏覽器對攔截時(shí)機(jī)的判斷不一致,而對于放在ajax回調(diào)中的代碼,反應(yīng)又不相同了,這里就不再贅述。但是,被瀏覽器攔截我們代碼中要彈出的窗口并不是程序員所希望的。
解決方案:
1、使用a標(biāo)簽替代
給出如下函數(shù),將此函數(shù)綁定到click的事件回調(diào)中,就可以避免大部分瀏覽器對窗口彈出的攔截:
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è)頁面
這種方法需要構(gòu)造一個(gè)from,然后由js代碼觸發(fā)form的submit,將表單提交到一個(gè)新的頁面,代碼較長,在這里就不寫了,大家知道有這種方案就行了。
大家注意,以上兩種方法不適合放在ajax的回調(diào)函數(shù)中,如果放在回調(diào)函數(shù)中,依然會被瀏覽器攔截。
3、終極解決方案--先彈出窗口,然后重定向
第三種方案,其實(shí)是一種變通方案,核心思想是:先通過用戶點(diǎn)擊打開頁面,然后再對頁面進(jìn)行重定向。示例代碼如下。
js code:
xx.addEventListener('click', function () {
// 打開頁面,此處最好使用提示頁面
var newWin = window.open('loading page');
ajax().done(function() {
// 重定向到目標(biāo)頁面
newWin.location.href = 'target url';
});
});
以上方法其實(shí)是打開了兩個(gè)地址,所以建議大家打開第一個(gè)地址的時(shí)候給出一個(gè)類似‘當(dāng)前頁面正在加載中,請稍后。。’的簡單提示頁,這樣可以避免打開兩次真正的目標(biāo)頁面,讓用戶察覺到頁面的重定向。
解決方法二:
<a href="javascript:;" onclick="dialog();">點(diǎn)擊彈窗</a>
<script>
function dialog(){
$.ajax({
url: 'url',
type: 'POST',
dataType: 'json',
async: false, // 此處必須定義為同步
data: {param1: 'value1'},
success: function(data){
window.open(data.url, '_blank'); //發(fā)起彈窗
}
})
}
</script>
該方法弊端:
實(shí)測能解決大部分瀏覽器的攔截問題,但是解決不了安全軟件的攔截(360不會攔截,但是QQ管家會攔截)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。