瀏覽器對新窗口打開頁面的阻止情況

事情是這樣的：我們后台人員有一個需求，希望在ajax請求成功后的回調函數里，新窗口打開一個頁面。示例代碼如下：

 

$("#btn").on("click",function(){
    $.ajax({
        url : "opendata.html",
        type : "post",
        data : {"a" : 1},
        success : function(){
            window.open("http://www.baidu.com")
        }
    })
})

但是這樣是不行的，瀏覽器會阻止頁面的打開。於是整理了一下網上繞過這個問題的方法，並測試了一下（我測試了IE，火狐，谷歌，Safari瀏覽器），現在說說我的測試情況：

有三種辦法繞過這個問題，第一種方法代碼如下：

$("#btn").on("click",function(){
    var tempWin = window.open("","_blank")
    $.ajax({
        url : "opendata.html",
        type : "post",
        data : {"a" : 1},
        success : function(){
            tempWin.location = "http://www.baidu.com"
        }
    })
})

這個方法是在ajax請求之前，先打開一個空白窗口，然后在回調中改變窗口的url實現的，在windows系統中，我測的瀏覽器都是ok的，都能夠新窗口打開頁面。

第二中方法代碼如下：

function openwin(url) {
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.setAttribute("id", "openwin");
    document.body.appendChild(a);
    a.click();
}

$("#btn").on("click",function(){
    $.ajax({
        url : "opendata.html",
        type : "post",
        data : {"a" : 1},
        async : false,
        success : function(){
            openwin("http://www.baidu.com")
        }
    })
})

這個方法是用a標簽來模擬window.open()。不過要注意的是，這個方法必須把ajax改成同步的方式，否則還是會阻止新頁面打開。還要注意的是，即使采用了同步的方式，Safari瀏覽器始終打不開頁面。

第三種方法代碼如下：

function openUrl( url ){
    var f=document.createElement("form");
    f.setAttribute("action" , url );
    f.setAttribute("method" , 'get' );
    f.setAttribute("target" , '_black' );
    document.body.appendChild(f)
    f.submit();
}

$("#btn").on("click",function(){
    $.ajax({
        url : "opendata.html",
        type : "post",
        data : {"a" : 1},
        async : false,
        success : function(){
            openUrl("http://www.baidu.com")
        }
    })
})

與第二中方法類似，這里用到了form標簽模擬window.open()。同理也需要把ajax改成同步的方式。令人高興的是Safafi瀏覽器用這個方法能夠打開新頁面。

以上的測試都是在windows系統下的結果。我們換到蘋果系統下，在蘋果系統下Safari瀏覽器對這三個方法都失效了。

通過以上測試，在回調中打開新頁面這個交互不可取。