window.open 被浏览器拦截解决方案

问题描述

最近做的项目里用了zoom,老师点击开始上课按钮可以直接进入直播室（底层是发请求获取start_url，然后通过window.open(start_url)）,但是在火狐和safari浏览器里，被阻止掉了

原因分析

当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这可能是一个广告，不是一个用户希望看到的页面。

解决方案

方案一：使用a标签替代

function newWin(url, id) {
              var a = document.createElement(‘a‘);
              a.setAttribute(‘href‘, url);
              a.setAttribute(‘target‘, ‘_blank‘);
              a.setAttribute(‘id‘, id);
              // 防止反复添加
              if(!document.getElementById(id)) {                     
                  document.body.appendChild(a);
              }
              a.click();
  }

亲测在safari浏览器里的确不再被阻止，但是在火狐浏览器里依然被阻止

方案二：先弹出窗口，然后重定向(最优方案)

先通过用户点击打开页面(必须是用户点击而触发的行为)，然后再对页面进行重定向

// 用户点击时执行
this.newTab = window.open('about:blank'); `

// 获取start_url成功后执行
this.newTab.location.href = start_url

亲测在Safari和火狐浏览器都没有被阻止