浏览器拦截新窗口解决方案

在浏览网页/进行前端开发的时候，我们经常会碰到新窗口打开被拦截的情况，那么浏览器是怎么进行新窗口检测拦截的呢？如何避免新窗口被拦截呢？

首先我们要先知道有哪些方式可以打开新窗口。

打开新窗口方式

1. js 调用 window.open()，打开新窗口；
2. a 标签设置 target=”_blank” 点击标签时，打开新窗口；
3. form 表单设置 target=”_black”，表单提交时，打开新窗口。

浏览器拦截机制

浏览器之所以要拦截新窗口弹出，主要是为了防止一些流氓网站在用户无感知的情况下，弹出新窗口。也就是说如果是用户主动触发的不会拦截，非用户主动触发的会进行屏蔽。

包括但不仅限于如下几个场景：

1. 网页加载完成后，立即打开新窗口（上述打开新窗口任意方式，包括模拟用户点击）；
2. 点击后异步回调中，进行打开新窗口操作（上述打开新窗口任意方式，包括模拟用户点击）；

针对异步回调打开新窗口的解决方案

可以考虑使用以下几种方案解决：

1. 提前请求获取下载地址，点击时不进行异步加载；
2. 把异步请求转换为同步请求（会阻塞窗口交互，不推荐）；

   const request = new XMLHttpRequest()
   // 第三个参数是用来设置是否异步，如果为false，则为同步请求
   request.open('GET', 'http://www.mozilla.org/', false)

3. 先打开一个新窗口，在异步响应后，再设置新窗口的url。

   const newWindow = window.open()
   // 异步回调中
   callback: ret => {
     // 设置异步回调返回的地址
     newWindow.href = ret.url
   }