window.open被浏览器拦截的解决办法

window.open被浏览器拦截的解决办法

1，这是一个什么样的问题？

有的时候我们想在js某一个事件之后，或者在接口回调成功之后去开启一个新窗口，这样的场景特别常见。

但是在很多时候，新弹出来的页面。会被浏览器给拦截掉，作为开发者，我们当然可以手动给浏览器放行，打开新窗口。

但是如果是那些对技术一无所知的小白用户，他们可能根本不会知道有一个新页面，那就比较难受了，以为是系统bug。

2，为什么会出现这个问题？

一般情况下，如果直接在js中调用window.open()函数去打开一个新窗口，浏览器检测到的是非用户操作产生的新弹出窗口，就会对其进行阻止。因为浏览器认为这可能是一个广告，不是一个用户希望看到的页面。
而且各个浏览器对于新窗口的拦截机制也不一样。

3，那我们如何解决？

3.1，用a标签代替，这样用户点击这个超链接，浏览器会认为它是打开一个新的链接，所以就不会拦截。

这里一般的解决办法是，将a标签的target属性设置为_blank。

<a href="url" target="_blank" /> 

我们也可以自己创建一个a标签的方法，然后在你想要用到的地方去调用这个方法。

function newWin(url, id) {  
    var a = document.createElement(‘a‘);  
    a.setAttribute(‘href‘, url);  
    a.setAttribute(‘target‘, ‘_blank‘);  
    a.setAttribute(‘id‘, id);  
    // 防止反复添加  
    if(!document.getElementById(id)) {    
      document.body.appendChild(a);                                                             
    }  
    a.click();  
}  

3.2，如果我们想要打开的新窗口的url，是通过接口返回给我们的时候。

我们可以首先新打开一个空白的窗口，然后当街口返回成功之后，我们再将新窗口的页面进行重定向就可以了。代码如下

const newWin = window.open('about:blank;');

$.ajax({
    url:'你的接口地址'，
    type: 'get',
    success: function(ret){
        var url = ret.url;
        newWin.location.href = url;
    }
})

4，参考文章

此篇文章是参考window.open被浏览器拦截的解决方案。

希望这篇文章对大家能有帮助，来自一个奔跑在前端路上的前端小白。