摘要
在ios环境，在某些情况下执行window.open不生效
一、window.open
window.open(url, target, windowFeatures)1. url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空白页。
2. target：「可选参数」,它可以给以下两种值
第一种是target关键字
_self：当前标签页加载；
_blank（默认值）：新标签页打开；
_parent：作为当前浏览环境的父级浏览上下文打开，没有父级浏览上下文，效果与_self相同；
_top：作为最顶级的浏览上下文打开，没有顶级浏览上下文，效果与_self相同。
第二种是一个字符串：
表示加载资源的浏览上下文的名称，也就是标签页的名称，如果这个名称在现有的标签页中不存在，则会开启一个新的标签页，如果存在，会跳转到这个标签页。
3. windowFeatures:「可选参数」，它是一个字符串，用来描述窗口的特性，其格式是"key1=value1, key2=value2"，即将key和value以=号连接拼接成字符串，多个key value以逗号隔开，比如我们要打开一个宽为500，高为600的窗口可以这么写：
window.open(url, 'new-window', 'width=500,height=600');
二、Bug
复现问题的demo：
async function jump() {
await fetch('/xxx');
window.open('https://www.xxx.cn');
}正常情况下执行window.open是能正常新标签页打开传入的url的，但是一旦前面用await做了异步操作后，再执行window.open，就不生效了。
三、原因分析
- 安全机制拦截：IOS的Safari浏览器为了防止恶意网站通过
window.open/a标签打开其他网站，于是对它们的调用有所限制，如果不是由用户直接交互触发的，而是由程序自动触发的，Safari会拦截这个操作。 - 异步操作：在AJAX回调中执行
window.open/a标签跳转，被浏览器认为是非用户交互行为，所以被拦截。
四、解决方案
方案1：改用location.href
async function jump() {
await fetch('/xxx');
location.href = 'https://www.xxx.cn';
}safari不会拦截location.href
并不是所有场景下都适合用location.href，因为location.href会刷新页面，所以需要根据具体场景来选择。
方案2：先打开一个空标签页
async function jump() {
const newWin = window.open("", "_blank"); // 提前打开一个窗口
const { jumpUrl } = await fetch('/xxx');
if (jumpUrl) {
newWin.location = jumpUrl;
} else {
newWin.close();
// ...
}
}
这里根据有没有jumpUrl进行跳转，如果没有jumpUrl，我需要调用close方法关闭刚才提前打开的那个窗口，而这样用户就会体验到的流程就是，先出来一个新窗口，随后被秒关闭，这样用户体验很差。
方案3：setTimeout/requestAnimationFrame
async function jump() {
await fetch('/xxx');
setTimeout(() => {
window.open('https://www.xxx.cn');
}, 0)
}async function jump() {
await fetch('/xxx');
requestAnimationFrame(() => {
window.open('https://www.xxx.cn');
})
}五、总结
如果setTimeout不生效，可以尝试加点延时看看，比如100毫秒，我这边实测的ios机型都能生效，所以就没加延时。
