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被浏览器拦截的解决方案。
希望这篇文章对大家能有帮助,来自一个奔跑在前端路上的前端小白。
网友评论