浏览器拦截非用户触发的弹出窗口

在项目中遇到了一个需要打开非用户触发的新窗口的问题,也在网上查了一些相关资料,特此积累下来。
直接上代码:

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();     //如果请求数据失败,将开始打开的空白窗口关掉
        }
    });
}

注意:如果产品告诉你关掉窗口的行为看上去太惊悚,也可以把这个异常处理去掉

问题:虽然基本实现了需求,但是毕竟会有一个新窗口出现,不知道有木有更完美的解决方案

原文地址:https://www.cnblogs.com/bldxh/p/6293169.html