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

近期有个项目需求，要用到window.open，但是在测试的过程中发现会被浏览器拦截，因之前没使用过，所以没有深究；网上说某些浏览器（比如Chrome，Firefox）出于安全和体验的考虑，会禁止使用 window.open(url) 打开新的窗口。

目前收集了几种解决办法：

1、使用表单提交方式

var form = document.createElement('form');
form.action = 'xx';
form.target='';
form.method='';
document.body.appendChild(form);
form.submit();

2、使用a标签模拟点击事件

const a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', url);
a.click();
document.body.removeChild(a);

以上两种方法写在ajax异步请求完成后调用无效

3、先打开窗口再更改地址

var nwindow = window.open();
ajax({
    ...
    success: function(res) {
        let url = res.url;
        nwindow.location.assign(url);
    }
})

因为浏览器会记录上一空白页面地址，点击浏览器的返回体验不好；

推荐使用nwindow.location.replace(url)代替nwindow.location.assign(url)；

这种方法有个缺点：window.open()打开新窗口必须在ajax之前，如果在之后的话依然会被拦截； 该方法如果ajax响应太慢，则会出现一个空白窗口，影响体验；

4、加个定时器延迟打开

setTimeout(()=>{window.open(url)}, 100);

有网友说：用Chrome浏览器来测试，当延迟 100 毫秒的时候，Chrome 会让窗口弹出，但是当延迟 2000 毫秒（即 2s）时这个操作会被阻止。经过多次试验，我发现这个临界值是 1000 毫秒。

经过的我测试，延迟设置100ms在谷歌，火狐以及国产浏览器上都可以正常跳转不被拦截。

最终选择第4种方案，虽然点击的时候有那么一丢丢停顿，但可以接受。