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

最新推荐文章于 2024-04-19 11:24:32 发布

诸葛韩信

最新推荐文章于 2024-04-19 11:24:32 发布

阅读量724

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_31968791/article/details/93979310

JavaScript 专栏收录该内容

63 篇文章

订阅专栏

本文探讨了解决window.open在现代浏览器中无法异步加载新页面的问题，提供了一种在用户交互后立即预加载中转页面，再通过异步回调更新URL的解决方案，适用于PC及移动端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于比较新的浏览器都加了一个机制，就是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();
          }
        });
    },