href 属性中的备用 link

Question

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

目前，我正在使用 a 标签的 href 属性来创建下载 link。如何在 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;
                }
            });
        });
    });
});

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

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

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

href 属性中的备用 link

Alternate link in href attribute

html

url

href

hyperlink