Question

我点击<a>元素运行处理程序如：

function onCummReportClick(e) {
    if ($(e.currentTarget).attr('href').indexOf('csv') !== -1) {
    {
        return true;
    }

       //Here some files loaded asynchronousely
    $.ajax().success(...).always(...);

    var reports = [];
    var downloadedCount = 0;
    var reportsCount = 9;

    var oneDownloaded = function() {
        if (downloadedCount === reportsCount) {
            //Prepare cummulative reports CSV
            $(e.currentTarget).attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(reports.join('\n\n')))

            //HERE!
            $(e.currentTarget).trigger('click');
        } else {
            setTimeout(oneDownloaded, 1000);
        }
    };

    setTimeout(oneDownloaded, 1000);
}

即。它下载报告，将其内容加入一个CSV并将其设置为base64编码为原始<a>的href。之后，我希望它自动下载，用户不必再次点击。

并且return true不会生成“正常”点击流，看起来就像是刚刚跳过。我的意思是我第二次遇到这个处理程序，但下载没有开始。

如果我将href设置为静态生成值，并且在处理程序中只返回true，如果按预期工作 - 文件会自动下载。

我知道我可以同步下载报告并使整个方法同步，但我不喜欢这种方法。

UPD ：我创建了jsfiddle来演示我要做的事情：https://jsfiddle.net/u1rs17w1/

Answer 1

我不知道为什么JSFiddle的代码不起作用，因为我理解所有关于＆＃34;丢失上下文的假设＆＃34;错误（至少有一半错误），因为原始超链接已正确更新（我的意思是href属性已更新）。

但我找到了另一种解决方案。我没有点击原始链接，而是执行以下操作：

var link = document.createElement('a');
link.download = _messages.CUMMULATIVE_REPORT_NAME;
link.href='data:application/csv;charset=utf-8,'+ encodeURI(csvFile.join('\n\n'));

//These 2 lines are required for Firefox
link.style = "display: none";
document.body.appendChild(link);

link.click();

它甚至可以从setTimeout处理程序中运行。我怀疑jquery风格的点击，即return true（我不能以某种方式清楚地称它）只能从主线程中运行。每次我使用setTimeout执行时都会继续执行新线程。但是在新线程中创建元素并单击它就像一个魅力！

快乐的编码！

UPD ：此解决方案在Firefox中不起作用。除非同步AJAX（ffffffuuuuuuuu！）和return true，否则在Firefox中没有任何作用。

UPD1 ：为Firefox添加了解决方案。

Jquery从setTimeout单击处理程序

1 个答案: