window.open()被浏览器拦截问题

一、原因

浏览器为了维护用户安全和体验，在JS中直接使用window.open(url，"_blank")来打开新的链接是会被拦截的，（window.open(url,”_self”)改变当前的窗口是可以生效的），通常项目需要在ajax异步请求完成后来打开新链接，下面提供几种解决方案

二、解决方案

方案一、

创建一个a标签，利用a标签跳转，能解决大多数浏览器兼容问题，但是这种方法写在ajax异步请求完成后调用无效

function openWin(url) {
    var a = document.createElement("a"); //创建a标签
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    document.body.appendChild(a);
    a.click(); //执行当前对象
}
openWin("./page/......");

方案二、

模拟form表单提交，能解决大多数浏览器兼容问题，但是这种方法写在ajax异步请求完成后调用无效

var form = document.createElement('form');
form.action = '"./page/a.html?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();

方案三、

在ajax调用之前先打开窗口，然后再设置新窗口的url来达到跳转的效果，但是该方法如果ajax响应太慢，则会出现一个空白窗口，影响用户体验，所以建议给该新窗口增加提示“正在拼命加载中”，但是我觉得这个并不是最好的解决方案

//先在ajax函数之前打开新窗口，后再加载url
$('#btn').click(function () {
    //打开一个不被拦截的新窗口
    var win = window.open();
    win.document.body.innerHTML="正在拼命加载中......";
    $.ajax({
        url: 'a.com',
        success: function (url) {
            //修改新窗口的url
            win.location.href = url;
        }
    })
});

方案四、

把ajax异步改成同步，该方法会阻塞浏览器运行导致卡顿，经过测试，就算改成同步，chrome还是会阻拦，Firefox不会阻拦

//先在ajax同步函数之后打开新窗口
$('#btn').click(function () {
    $.ajax({
        url: 'a.com',
        async: false,  // 同步，意味着执行该ajax完成后，后续代码才继续运行
        success: function (url) {
        }
    });

    //执行完ajax后再打开新窗口
    window.open("./page/......", "_blank");
});

 

方案五、

 

把ajax执行完后，弹出一个弹出框提示用户，由用户确认点击打开，这个方法目前感觉是最友好的

$('#btn').click(function () {
    $.ajax({
        url: 'a.com',
        success: function (url) {
            option.open({
                //type: 1,
                icon: 3,
                title: "支付",
                btn: ['立即查看', '取消'],
                content: "文件已经校验成功，请查看结果",
                btn1: function (index) {
                    option.closeAll();
                    window.open("./page/......");
                },
                btn2: function (index) {
                    option.closeAll();
                }
            });
        }
    });
});