Question

我想在HTML中创建一个下载按钮，如果单击该按钮，将从URL下载文件。但是，如果URL不存在（它返回404错误），它将尝试从备用链接下载该文件。如果备用链接也失败，则不执行任何操作。

目前，我正在使用href标记的a属性来创建下载链接。如何在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中运行该代码，那么您可以在浏览器开发控制台的网络选项卡中看到对目标的头部请求。由于跨域问题，实际下载无法启动。不过，这是一个单独的问题。

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

这应该指向正确的方向。但是你必须为此稍微深入研究一下JavaScript编程。

href属性中的备用链接

1 个答案: