a 标签 download 和 target 不配合

发现一个奇怪的事,看代码

<a id="downloadAlink" target="_blank" href="http://www.baidu.com" download="filename.html">下载</a>

理论上,有 download 、target 、href ,在这里点击应该是新开标签下载 href 里东西,然而实际上失败的,也就是说,target 本身的作用确实是给 href 的,并不是给 download 的,download 并不会采用 target 的值,这里,你把 download 去掉,就会正常在新开页面打开 href 链接。

那如果要实现新开窗口下载 href 里东西,那就要手动绑定 click 事件,打开新窗口,下载,例如;

window.onload = () => {
    let downloadAlink = document.getElementById('downloadAlink');
    downloadAlink.onclick = function() {
        event.preventDefault();
        let anotherWin = window.open(),
            anotherDownloadAlink = this.cloneNode(true);
        anotherDownloadAlink.style.display = 'none';
        anotherWin.document.body.appendChild(anotherDownloadAlink);
        anotherDownloadAlink.click();
    };

};
posted @ 2018-01-16 17:42  xianshenglu  阅读(1808)  评论(0编辑  收藏  举报