如何解決window.open被瀏覽器攔截的問題？詳細(xì)解決方案！

今天我們要說的是和我們?nèi)粘Ｔ跒g覽各種網(wǎng)頁有關(guān)的內(nèi)容，不知道大家在使用瀏覽器的時候有沒有被攔截過，那么今天我們要說的就是有關(guān)于：“ 如何解決window.open被瀏覽器攔截的問題？ ”這個問題的解決方法分享！希望對大家有所幫助！

現(xiàn)象

最近在做項目的時候碰到了使用window.open被瀏覽器攔截的情況，搞得人無比郁悶啊，雖然在自己的環(huán)境可以對頁面進(jìn)行放行，但是對用戶來說，不能要求用戶都來通過攔截。何況當(dāng)出現(xiàn)攔截時，很多小白根本不知道發(fā)生了啥，不知道在哪里看被攔截的頁面，簡直悲催啊~~。

另外，可以發(fā)現(xiàn)，當(dāng)window.open為用戶觸發(fā)事件內(nèi)部或者加載時，不會被攔截，一旦將彈出代碼移動到ajax或者一段異步代碼內(nèi)部，馬上就出現(xiàn)被攔截的表現(xiàn)了。

原因分析&深入研究

當(dāng)瀏覽器檢測到非用戶操作產(chǎn)生的新彈出窗口，則會對其進(jìn)行阻止。因為瀏覽器認(rèn)為這不是一個用戶希望看到的頁面。

比如對js中直接執(zhí)行的，如下代碼：

js code:

//  直接打開一個頁面
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');
    });

所有瀏覽器都不會攔截。

綜上所述，各瀏覽器對攔截時機(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òu)造一個from，然后由js代碼觸發(fā)form的submit，將表單提交到一個新的頁面，代碼較長，在這里就不寫了，大家知道有這種方案就行了。

大家注意，以上兩種方法不適合放在ajax的回調(diào)函數(shù)中，如果放在回調(diào)函數(shù)中，依然會被瀏覽器攔截。
3、終極解決方案--先彈出窗口，然后重定向

第三種方案，其實是一種變通方案，核心思想是:先通過用戶點擊打開頁面，然后再對頁面進(jìn)行重定向。示例代碼如下。

js code:

xx.addEventListener('click', function () {
        // 打開頁面，此處最好使用提示頁面
        var newWin = window.open('loading page');

        ajax().done(function() {
            // 重定向到目標(biāo)頁面
            newWin.location.href = 'target url';
        });
    });

以上方法其實是打開了兩個地址，所以建議大家打開第一個地址的時候給出一個類似‘當(dāng)前頁面正在加載中，請稍后。?！暮唵翁崾卷?，這樣可以避免打開兩次真正的目標(biāo)頁面，讓用戶察覺到頁面的重定向。
解決方法二：

<a href="javascript:;" onclick="dialog();">點擊彈窗</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>

該方法弊端：

實測能解決大部分瀏覽器的攔截問題，但是解決不了安全軟件的攔截（360不會攔截，但是QQ管家會攔截）

那么以上就是今天小編想和大家分享的有關(guān)于：“如何解決window.open被瀏覽器攔截的問題？”這方面的相關(guān)問題和解決方法，當(dāng)然隨著技術(shù)的更新可以解決的方法肯定會越來越多，如果大家有其他更好的方法也可以和大家分享學(xué)習(xí)，更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool做一個系統(tǒng)的學(xué)習(xí)。