场景描述:
在异步方法的回调函数中调用 wimdow.open(url),理想中接口有返回值后打开新窗口访问url,可是有url了窗口却没有打开,第二次点击按钮触发该方法时新窗口出现了。
排查问题:
window.open()调用完后会有返回值,定义一个变量接收返回值并打印,发现返回值为 null。查阅资料发现第一次触发被浏览器拦截了,如图所示:
拦截的原因是因为接口调用时间超过了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