【bug解决】ios safari浏览器使用window.open失效

前言

在移动端开发中，我们做一些下载文件的功能，经常要用到window.open方法。也就是后端直接返回给你个下载的路径，如果你都浏览器支持预览就会先打开预览，然后自己手动下载，不支持则直接下载。

但是再ios系统里，有时会出现window.open方法失效的问题。明明后端返回了地址，但是使用window.open却没有动静。这是为什么呢？

原因

因为safari浏览器有一些安全策略，禁止在回调函数中执行window.open方法，以防页面不断弹出窗口。
例如：
有效打开如果你是提前获取了文件地址，然后通过点击触发下载就可以生效：
window.open(url)
无效打开如果你是先发送请求获取地址，然后请求的成功回调里触发下载就不会生效：
axios.get(‘xxx’).then((url) => {
window.open(url, ‘_blank’);
});

解决

方法1. 先打开一个空白页，再更新它的地址

let oWindow = window.open(’’, ‘_blank’);
axios.get(‘xxx’).then((url) => {
oWindow .location = url;
});

方法2. 超链接打开

axios.get(‘xxx’).then((url) => {
let a = document.createElement(‘a’);
a.setAttribute(‘href’, url);
document.body.appendChild(dom);
a.click();
a.remove()
});

方法3. 使用 window.location

axios.get(‘xxx’).then((url) => {
window.location.href = url;
});

大功告成！