在浏览器中异步打开新窗口

2018-09-03 本文已影响9人 z4d

前言

之前开发中遇到一个需求，是需要向后端先请求数据，拿到一个 url 后，然后用该 url 打开新窗口，但按照该流程写好代码开始调试时，却发现新窗口被浏览器拦截了，查资料发现这是浏览器的安全机制，用户主动触发的行为才能打开新窗口，下面先介绍一下打开新窗口的几种方法。

在浏览器中打开新窗口的几种方法

window.open

// 以百度为例
const _window = window.open('https://www.baidu.com');

模拟<a>元素点击事件

function openWindow(url) {
  const a = document.createElement('a');
  a.href = url;
  a.target = '_blank';
  a.click();
}

openWindow('https://www.baidu.com');

模拟表单提交

function openWindow2(url) {
  let form = document.createElement('form');
  form.action = url;
  form.target = '_blank';
  form.method = 'GET';
  document.body.appendChild(form);
  form.submit();
  // clear
  document.body.removeChild(form);
  form = null;
}

openWindow2('https://www.baidu.com');

但这种方法 url 的 query 参数无法被正确提交。

利用 Event 对象

function openWindow3(url) {
  let event;
  // IE11及以下浏览器不支持Event constructor
  if (typeof Event === 'function') {
    event = new Event('click');
  } else {
    event = document.createEvent('Event');
    event.initEvent('click', false, false);
  }
  const el = document.createElement('button');
  el.addEventListener('click', () => {
    window.open(url);
  }, false);
  el.dispatchEvent(event);
}

openWindow3('https://www.baidu.com');

该方法本质上也是 window.open 方法

异步回调中打开新窗口

用 vue 做个简单的例子

<div id="app">
  <button @click="open">open</button>
  <button @click="open1">open1</button>
  <button @click="open2">open2</button>
  <button @click="open3">open3</button>
</div>

const app = new Vue({
  el: '#app',
  data() {
    return {
      url: 'https://www.baidu.com',
    };
  },
  methods: {
    open() {
      console.log('open a new window');
      window.open(this.url);
    },
    open1() {
      openWindow(this.url);
    },
    open2() {
      openWindow2(this.url);
    },
    open3() {
      openWindow3(this.url);
    },
  },
});

在同步过程中，这4种方法都能够正确的打开新窗口，现在我们将同步改为异步。

const mockFetch = (url) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    }, 1500);
  });
};

···
async open() {
  const url = await mockFetch(this.url);
  window.open(url);
},
async open() {
  const url = await mockFetch(this.url);
  openWindow(url);
},
async open2() {
  const url = await mockFetch(this.url);
  openWindow2(url);
},
async open3() {
  const url = await mockFetch(this.url);
  openWindow3(url);
},
···

可以看到，异步过程中，使用这4种方法去打开新窗口都会被浏览器拦截，因为回调上下文中的函数已经不是用户主动的行为了，这样迫使我们寻求新的解决思路，而不是纠结于怎样打开新窗口。

解决方案

上面提到，由于浏览器的安全机制，会将异步过程中打开新窗口的行为拦截，因此，该问题有两种解决思路。

将请求改为同步请求

我们可以将请求改为同步，这样浏览器就会认为打开新窗口的行为是由用户主动触发的，并直接打开新窗口。

以 $.ajax 为例，可以在 options 中添加 async: false 选项，这样就将请求改为同步，从而保证不被浏览器拦截。

$.ajax({
  type: 'GET',
  url: 'xxx',
  async: false,
}).then(() => {});

但其本质依然是将 XMLHttpRequest.open() 方法中的第三个参数 async 设置为 false

XMLHttpRequest.open Syntax

设置 async 为 false，则请求变为同步。

const XHR =  new XMLHttpRequest();
...
XHR.open('GET', 'xxx', false);
...

注意：这种解决方案会阻塞 js 主线程，block 用户与页面的交互，所以这种方案虽然能解决问题，但不推荐使用。

提前打开新窗口，待请求 resolve 后，再将新窗口重定向

以 window.open 为例

...
async open() {
  const newWindow = window.open();
  const url = await mockFetch(this.url);
  newWindow.location.href = url;
},
...

这样就会先打开一个空白页面，等到请求成功返回以后，新窗口就会跳转至对应的页面。

但该方案也存在问题：

如果请求失败，需要关闭之前打开的空白窗口，影响用户体验
如果请求 pending 时间过长，则新窗口等待时间过长，用户体验也比较差，所以可以专门做一个 loading 的落地页，然后后端进行重定向。

额外补充

之前的代码，是将请求 pending 时间模拟为 1500 ms，而当该时间小于 1000 ms 时，发现异步回调中打开新窗口的行为，没有被浏览器拦截，而是直接打开了新窗口。这是因为浏览器认为 pending 时间过短的异步回调中执行的函数在一定程度上也是安全的，故可以直接打开新窗口。

注：上述情况在 Chrome 浏览器中测试，还未在其他浏览器中测试。

总结

由于浏览器的安全机制，会将异步过程中打开新窗口的行为拦截，故我们可以将请求改为同步，或在请求之前打开新窗口，并在请求成功后重定向新窗口这两种方法解决这一问题，而在实际应用时，应该使用第二种方法解决。