web-dev-qa-db-ja.com

Firefoxでプログラムで<a>タグをクリックしない

Jqueryのclick()- functionに問題があります。 document.createElement('a')で_<a>_- elementを作成し、この要素についてclick()- functionを呼び出したい。この要素について、Excelファイルを作成し、デスクトップに保存します。

私のコード：

_$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-Excel;utf-8,test';
    link.click();
});
_

この関数はchromeでは動作しますが、Firefoxでは動作しません。

実施例

なぜそれが機能しないのか誰にも分かりますか？

javascriptjqueryfirefoxclick
45
WhistleWhite

Firefoxでは、作成された要素をDOMに明示的に追加でき、機能します：

$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    // Add the element to the DOM
    link.setAttribute("type", "hidden"); // make it hidden if needed
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-Excel;utf-8,test';
    document.body.appendChild(link);
    link.click();
    link.remove();
});

フィドル

98
lurker

FireFoxであっても、要素をDOMに追加する必要はありません。 .click（）メソッドを次のコードに置き換えます。

link.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}));

$('button').on('click', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-Excel;utf-8,test';
    link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>
82
Denis Giffeler

クリックをトリガーする前にDOMに要素を追加します。

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

これはすべての主要なブラウザで私のために働いた

7
Parul

Jqueryを使用して要素を作成できます。両方のブラウザで動作します

$(document).on('click', '#test', function (event) {
    var link = $("<a/>", {
        "download": "test.xls",
        "href": "data:application/vnd.ms-Excel;utf-8,test"
    });
    $("#test").append(link);
    link.get(0).click();
});

Fiddle

1
Anoop Joshi