浏览器对新窗口打开页面的阻止情况

事情是这样的：我们后台人员有一个需求，希望在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浏览器对这三个方法都失效了。

通过以上测试，在回调中打开新页面这个交互不可取。