Firefox a.click 在没有断点的情况下不会触发答案

【问题标题】：Firefox a.click won't fire without a breakpointFirefox a.click 在没有断点的情况下不会触发
【发布时间】：2017-01-21 06:25:46
【问题描述】：

我正在做一个项目，我们有一个 AJAX 调用，它响应一个包含 excel 文件的 blob。我希望代码在收到响应时打开文件作为下载。这是回调：

var blob = new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement("a");
var header = response.headers("Content-Disposition");
a.download = header.substring(header.indexOf("filename=") + "filename=".length);
a.href = objectUrl;
document.body.appendChild(a);
console.debug("Clicking a tag");
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(objectUrl);

这段代码在 chrome 中运行良好，但在 firefox 中，当 a.click() 触发时没有任何反应。调试语句打印，所以我知道回调正在发生。另外，出于某种原因，如果我在a.click() 上设置断点，它会完美运行。

谁能解释为什么点击只能在调试模式下工作？

【问题讨论】：

标签： javascript firefox download click anchor

【解决方案1】：

Firefox 有一些保护措施，或者只是针对此类事情的奇怪行为。我不知道推导，但在点击之前让浏览器返回片刻通常会清除它：

// ...
a.href = objectUrl;
document.body.appendChild(a);
setTimeout(function() {
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(objectUrl);
}, 0);
// ...

请注意，setTimeout 之后的代码将在setTimeout 的内容之前运行。

你甚至可能需要两个：

// ...
a.href = objectUrl;
document.body.appendChild(a);
setTimeout(function() {
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(objectUrl);
    }, 0);
}, 0);
// ...

【讨论】：

@user2752635：我可能记错了，你可能需要它在click之后。我在上面的两个地方都添加了一个例子。我还记得大约一年前在 Firefox 中有一些东西，0 超时不起作用，但 10 超时不起作用。（此时我决定重新考虑我的整个方法，因为我对此并不满意...... :-)）
这解决了我的问题。我不喜欢我的代码中有setTimeout(fn, 0)'s（尤其是嵌套的），但如果它有效，它就有效。
另外，我试过没有第一个，但没有用。两者都需要。
哇。是的，有时你需要让步才能正常工作。在这种特殊情况下，对我来说似乎是一个错误。其他情况是合理的，但是......
@user2752635：我可能不必这么说，但是：一定要彻底测试，以防它只是间歇性地工作。这就是我在上面提到的情况下发生的情况，它只在 10 毫秒时变得可靠，然后我采取了另一种方式。