浏览器拦截非用户触发的弹出窗口
在项目中遇到了一个需要打开非用户触发的新窗口的问题,也在网上查了一些相关资料,特此积累下来。
直接上代码:
onClick() {
let {mediaActs} = this.props;
mediaActs.goAuthorWeixin().then((res)=>{
if(res.code===10000){
window.open(res.data);
}
});
}
本以为这样写就可以,却忽略了浏览器不允许程序触发打开新窗口的行为,当然是为了防止一些恶意行为。
因此你会得到一个漂亮的提示:
但是需求如此,必须这样做,尝试过新建个a标签,动态添加href属性再动态触发click等方式,都是无济于事,原因很简单,浏览器又不傻,它知道这仍是程序触发的,所以都无法成功
废话不多说,看最后解决方法如下:
onClick() {
let tempWindow=window.open(); //用户点击时先打开一个新窗口,但此时是一个空白窗口,并把这个新窗口的全局对象保存为tempWindow
let {mediaActs} = this.props;
mediaActs.goAuthorWeixin().then((res)=>{
if(res.code===10000){
tempWindow.location=res.data; //请求数据成功后,将地址赋值给新窗口的location属性,即修改新窗口路径
}else{
tempWindow.close(); //如果请求数据失败,将开始打开的空白窗口关掉
}
});
}
注意:如果产品告诉你关掉窗口的行为看上去太惊悚,也可以把这个异常处理去掉
问题:虽然基本实现了需求,但是毕竟会有一个新窗口出现,不知道有木有更完美的解决方案