window.open打开新窗口被拦截

1.背景

项目中真实遇到此场景，但是出现频率极低，应与浏览器所处于的稳定状态也有关系

ajax请求后，then中进行新窗口的打开，当前窗口打开则未出现

2.原因

搜索相关结论如下：

浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。因为浏览器认为这可能是一个广告。

大佬点拨：主要看这个弹出窗口执行js的调用栈是不是线性的

3.解决方案

尝试过两个方案但针对ajax回调打开也行不通：

1）手动创建a标签并模拟点击操作

let link = document.createElement('a'); // 创建a元素
link.href = url; // 设置href属性
link.target = '_blank'; // 设置target属性
document.body.appendChild(link); // 添加到页面

link.click();

2）改交互方案

增加按钮，数据返回后高亮，再支持点击打开新页面（该方案被产品否了）

3）请求前先打开一个空白页，待数据返回后重定向

let page = window.open('about:blank'); // 打开一个空白页

ajax().then((res) => {
    page.location.href = res; // 重定向
});

4.持续思考

第三种方案还要考虑安全漏洞（会话劫持，so补充noopener noreferrer）与代码的健壮性（如果接口报错了，要关闭空白页）

验证时可通过控制台fetch接口 长延时/短时间多次打开窗口 可必现场景

其实吧，从用户角度来说，这个拦截确实不友好；从浏览器安全角度来说，它的策略也是合理的，所以见仁见义吧，看如何评估……