href 属性中的备用链接

Question

我想在 HTML 中创建一个下载按钮，这样如果单击它，将从 URL 下载文件。但是，如果 URL 不存在（它返回 404 错误），它将尝试从备用链接下载文件。如果备用链接也失败，则什么也不做。

目前，我正在使用a 标签的href 属性来创建下载链接。 如何在href属性的帮助下完成上述过程？ 如果href 无法实现，那么创建这样一个按钮的过程是什么？

更新：

<a href="downloadlink.com/somefile.exe">Download File</a>

Answer 1

我用概念证明为你创建了一个提琴手：http://jsfiddle.net/zbb7j2pq/1/

HTML：

<a id="button" href="" 
    data-primary-target="http://www1.some-server.example/file"
    data-secondary-target="http://www2.some-server.example/file"
    data-ternary-target="http://www2.some-server.example/file">
    Download
</a>

脚本（为方便起见，在本例中使用 jQuery 库）：

$(document).ready(function(){
    $('#button').on('click', function(e){
        e.preventDefault();
        var targets = [
            $(e.target).data('primary-target'),
            $(e.target).data('secondary-target'),
            $(e.target).data('ternary-target')
        ];
        $(targets).each(function(key, target){
            $.ajax({
                type: 'HEAD',
                url: target,
                success: function() {
                    window.location = target;
                }
            });
        });
    });
});

如果您在提琴手中运行该代码，那么您可以在浏览器开发控制台的网络选项卡中看到对目标的头部请求。由于跨域问题，实际下载未开始。不过，这是一个单独的问题。

代码允许您遍历指定的备选方案并为每个备选方案执行一个例程。然后，在该例程中，您可以发出头部请求并检查它是否有效且可用。如果是这样：将 Windows 位置对象更改为它，下载将开始。如果不只是跳到下一个替代方案。

这应该会为您指明正确的方向。但是您将不得不为此深入研究 JavaScript 编程。