windowopen-被浏览器拦截解决方案

问题描述

最近做的项目里用了 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 和火狐浏览器都没有被阻止