火狐不支持 download 属性吗

今天看到一个头条的不错的头条视频，想保存下来却发现不能下载。于是用开发者工具找到播放器的地址打开，然后用鼠标右键的「视频另存为」将视频下载下来。这样做感觉还是有些麻烦，就有了开发做一个插件的想法。

捕获.JPG

插件用油猴脚本开发，利用油猴脚本可以省去很多配置上的麻烦。像是下载视频这一种插件，如果想做的简单一点，几十行代码就可以了。我只是想下载今日头条的视频，所以也没有做的太复杂。核心功能的实现利用 html5 中的 a 标签，具体的做法是先添加 a
标签，然后把获取到的 video 元素的 src 属性赋值给 a 标签的 href 并设置 download 属性，最后触发 a 标签的点击事件。具体代码如下：

        var a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.id = "downloadA";
        body.appendChild(a);
        document.querySelector("#downloadA").click();

download 属性的作用是点击 a 标签指向的资源时，对资源进行下载而不是跳转页面浏览。下图是各浏览器对该属性的支持情况。

图片.png

笔者使用火狐进行的测试，本以为很简单的东西却一直无法实现下载，只能跳转页面，完整的代码如下：

// ==UserScript==
// @name     网页视频下载
// @version  0.1
// @description  通过替换获取视频地址接口的方式, 实现解除B站区域限制; 只对      HTML5播放器生效; 只支持番剧视频;
// @author  caveshao
// @include *://www.365yg.com/*
// @include *://www.365yg.com/group/*
// @include *://www.baidu.com/*
// @grant    GM_addStyle
// ==/UserScript==
'use strict';

(function() {

var button = document.createElement("button");
button.id = "downloadBtn";
button.style.cssText = "position:fixed;bottom:60px;right:90px;background-color:black;color:white;width:20px;height:20px;z-index:998;";

var body = document.querySelector("body");
body.style.position = "relative";
body.appendChild(button);

var downloadTool = {
    getFileName: function(url) {
        var end = url.lastIndexOf("/");
        var start = end - 10;
        return url.substring(start, end);
    },
    downloadVideo: function(url, fileName) {
      var content = "file content!";
            var data = new Blob([content], {
                type: "text/plain;charset=UTF-8"
            });
      
        var a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        a.id = "downloadA";
        body.appendChild(a);
        document.querySelector("#downloadA").click();
      
      window.URL.revokeObjectURL(data);
    }
};


function main() {
    var video = document.querySelector("video"),
        url = null,
        name = "video";

    if (video) {
        url = video.src;
    }
    document.querySelector("#downloadBtn").onclick = function() {
         downloadTool.downloadVideo(url, downloadTool.getFileName(url));
    }
}

main();
})();

用 chrome 测试，发现没有问题，难道火狐不支持这个属性？我又把 download 的属性查了一下，发现火狐中 download 属性只适用于「同源的 URL」，目前似乎没有什么解决方案。如果有大佬知道解决方案，希望能在评论中指出。

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。