前言

在移动端开发中,我们做一些下载文件的功能,经常要用到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;
});

大功告成!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐