Safari 下用 "location.href = filePath" 实现下载功能的诡异 bug

Safari 下的一些诡异 bug 我们已经领教一二，比如前文中说的无痕浏览模式下使用 localStorage 的 API 就会报错。今天我们要讲的是利用 location.href = filePath 实现下载文件功能却在 Safari 下有一些奇怪的现象。

location.href = filePath

一般在页面中实现文件的下载，我们都会用一个 A 标签，然后将该标签的 href 属性指向文件在服务端的地址，但是我们也可以用 location.href = filePath 的 js 语句实现文件的下载。具体可以参考我以前写的文章 location.href 实现点击下载功能。

target='_blank'

如果一个 A 标签上有个 target 属性，并且属性值为 '_blank'，那么点击这个 A 标签，就会在新的标签页打开该 A 标签所指向的地址。

在移动端，一般我们不会在 A 标签上再画蛇添足写上 target='_blank'，因为移动端频繁打开新的页面体验会很差。如果写上了 target='_blank' 呢？没关系，基本上所有的移动端浏览器都会自动忽略它，也就是说你加了我也不让你在新页面打开，但是也有个别浏览器允许你新建页面打开，这里面就包括了 Safari 和 chrome。

BUG 根源

说了这么多铺垫，我们来聊聊具体的 bug。需求很简单，有个 A 页面，A 页面上有个超链接指向 B 页面，B 页面上有个下载按钮，指向一个 app 的下载地址。

我们先写 A 页面，如果你是这样写的，那么恭喜你，就没有后续问题了：

<a href="B.htm">click me</a>

但是如果你加上了 target='_blank' 的话，那么可能就会有隐患：

<a href="B.htm" target='_blank'>click me</a>

假设我们写了后者，接下来写 B 页面的逻辑。如果你用的是 A 标签实现下载功能，那么恭喜你，你应该不会碰到问题：

<a href='https://itunes.apple.com/...'> download app </a>

但是楼主正是因为在 A 页面用了 target='_blank' 并且在 B 页面用了 location.href = filePath 才发现了这个奇葩问题。比如在 B 页面这样写：

<a id='a'>download app</a>
<script>
  document.getElementById('a').onclick = function() {
    location.href = 'https://itunes.apple.com/...';
  };
</script>

如果单独打开 B 页面，点击下载按钮，自动跳到 appStore，不会有任何问题；但是如果从 A 页面打开标签进入 B 页面，然后在 B 页面点击下载按钮，跳到 appStore，新打开的 B 页面自动关掉了！

是不是用了 target='_blank' 的原因呢？接着在 chrome 下测试，发现 chrome 没有类似问题，从 A 页面打开进入 B 页面，然后点击 B 页面的下载，能进入 appStore，同时 B 页面也不会消失。

解决方法

我们会出现这样的问题？我个人认为是浏览器的解释问题，我们无法改变。出现了这种问题，虽然心中把 Safari XX 了几次，但是问题还是要解决的。这里提出两点：

尽量在移动端页面的 A 标签中不用 target='_blank'，如果 Safari 没有在新页面打开，那么用 location.href = filePath 的方法也还是能够实现下载文件功能的，页面也不会出现丢失
如果用了 target='_blank' 呢？那就不要用 location.href 的方式去实现下载功能，老老实实写个 A 标签吧！