关于window.open( )触发时没有立刻打开新窗口的问题

436 阅读1分钟

场景描述:

在异步方法的回调函数中调用 wimdow.open(url),理想中接口有返回值后打开新窗口访问url,可是有url了窗口却没有打开,第二次点击按钮触发该方法时新窗口出现了。

排查问题:

window.open()调用完后会有返回值,定义一个变量接收返回值并打印,发现返回值为 null。查阅资料发现第一次触发被浏览器拦截了,如图所示:

image.png

拦截的原因是因为接口调用时间超过了1s,1s后再调用window.open()让浏览器判定为非用户行为,即被判定为广告弹窗,所以被屏蔽。

解决办法

方法一

允许该网站弹出窗口,问题得到解决。 优点:开发省事了; 缺点:用户体验差

方法二

在调用异步方法前创建一个空白窗口,等接口调用完后给新窗口换上新的地址。

let newWindow = window.open('about:blank/#loading', '_blank');
xxxx().then(res => {
    //...more logic
    newWindow.location.href= href;
    //...more logic
}).catch((err) => {
    newWindow.close();
    console.log(err,'errrr');
    this.$message.error("图纸获取失败:出现异常")
});

方法三

优化后端接口,让后端接口响应时间不超过1s