前言
之前开发中遇到一个需求，是需要向后端先请求数据，拿到一个 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
设置 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 浏览器中测试，还未在其他浏览器中测试。
总结
由于浏览器的安全机制，会将异步过程中打开新窗口的行为拦截，故我们可以将请求改为同步，或在请求之前打开新窗口，并在请求成功后重定向新窗口这两种方法解决这一问题，而在实际应用时，应该使用第二种方法解决。
