window.open 被浏览器阻挡

今天写代码遇到了window.open被浏览器阻拦的问题, 需求是发送一个ajax请求, 应答的对象里有value属性如果不为空, 就根据这个value的信息保存sessionStorage, 然后根据sessionStorage打开一个新页面, 显示商品详情页, 如果value属性为空, 就不打开新窗口, 在原窗口显示一下已有的基本信息.
经过试坑, 完成不了需求. 放弃了....试坑过程总结一下.

尝试失败的方法

angular的$watch服务

由于屏蔽原因可能是我在ajax回调里使用了window.open(), 所以思路是把window.open拿出来不放在回调里, 所以设置了个变量用于查看状态$scope.aaa, 在回调里改变值, 然后$scope.$watch监控变量, 然后调用window.open().
经过尝试这种方法还会被屏蔽.
失败

定时器方法

在回调里用了setTimeout, 再打开window.open(), 还被屏蔽.
失败

新建a标签, 使用a.click方法

解决window.open被浏览器拦截的问题

function newWin(url) { 
      var a = document.createElement('a');  
      a.setAttribute('href', url);
      a.setAttribute('style', 'display:none');  
      a.setAttribute('target', '_blank');  
      document.body.appendChild(a);
      a.click();
      a.parentNode.removeChild(a);  
}

不好使, 失败~

可能有用的方法

window.open 打开页面被浏览器阻挡的问题

(懒得试了, 即使好用也满足不了我的需求)

由于比较新的浏览器都加了一个机制，就是window.open不能够异步加载，也就是说，你用ajax请求了某个接口以后再去window.open一个新的页面，它很大可能被浏览器阻挡了，除非你调整了浏览器的机制。
那么有没有好的方法进行解决这个问题呢？
有的人说用window.location.href来跳转，这个在PC端可以，但是也是有一个问题就是会覆盖当前的页面。而且移动端，如果是打开doc或者pdf文件，Safari或者其它的一些浏览器还是会不跳转。
那么我们还是要回到window.open来进行方案布局了。
由于浏览器需要用户操作后才能够跳转，那么我们就在用户click或者touch等事件后直接调用一下window.open，至于第一个参数你传什么都没有所谓，如果要美观，可以传一个自己写好的loading页面，可以理解成为一个中转页面。
当你的url生成完，也就是异步回调后拿到了需要跳转的url，再去替换。
伪代码如下：

downloadProtocolInterFace(id) {
      let open = window.open('../download');//打开另一个页面被拦截的问题和window.location.href
      //下载协议，设计方案需要而录入方案无
      this.load = loading(this, "下载协议中...");
      let data = {
        plan_item_id: id //方案授予ID
      };
      approver
        .downloadProtocol(data)
        .then(res => {
          if (res.retCode === 0) {
            if(!open) {
              window.location.href = res.data.file_path;
            }else {
              open.location = res.data.file_path;
            }
          } else {
            this.errorShow(this.approverErrorData);
          }
          this.load && this.load.close();
        })
        .catch(err => {
          this.load && this.load.close();
          if (err && err.data && err.data.errMsg) {
            this.$message.error(err.data.errMsg);
            this.reload();
          }
        });
    },

作者：诸葛韩信
来源：CSDN
原文：https://blog.csdn.net/qq_31968791/article/details/93979310
版权声明：本文为博主原创文章，转载请附上博文链接！