使用window.open打开新窗口被浏览器拦截的解决方案

问题描述:

代码中直接使用window.open('//www.baidu.com', '_blank');会被浏览器窗口拦截

原因
浏览器为了维护用户安全和体验,在JS中直接使用window.open(url,"_blank")来打开新的链接是会被拦截的。
通常项目需要在ajax异步请求完成后来打开新链接,下面提供几种解决方案

解决方案

1.最常用的在ajax异步请求成功后打开新窗口

//先在ajax函数之前打开新窗口后再加载url
    $('#btn').click(function () {
        // 打开页面,此处最好使用提示页面
        var newWin = window.open();
        newWin.document.body.innerHTML="正在加载中......";
        $.ajax({
            url: 'www.###.com',
            success: function (url) {
                // 重定向到目标页面
                newWin.location.href = url;
            }
        })
    });

2.利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方不适用于ajax异步请求回调中打开新窗口,在ajax异步请求完成后调用无效(用户点击事件触发)

function newWin(url){ //新窗口打开
        var a = document.createElement('a');
        a.setAttribute('href', url);
        a.setAttribute('style', 'display:none');
        a.setAttribute('target', '_blank');
        document.body.appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
    };
     document.body.addEventListener('click', function() {
           newWin('http://www.baidu.com');
        });

相关推荐