判断文件是否加载到 iframe 的方法

Question

我遇到了一个问题：我想在“保存文件”对话框关闭或加载我在服务器上生成的 csv 文件（隐藏用于加载的微调器）时抓拍片刻。我知道 Javascript 中没有这样的事件。我绝对不想在后端为这样的小问题添加 cookie，所以我想实施另一种解决方法。我看到的唯一出路是 iframe，但据我所知，至少在 Chrome 中的附件 header 的情况下，像 onload 这样的事件侦听器不起作用。我还尝试实现一种计时器检查 iframe 状态，但它在发送文件请求后立即起作用。文件会在几秒钟 (10-20) 内在服务器上生成，因此此解决方案不符合我的目标。

我在前端使用 Angular，因此任何兼容的解决方案（vanilla JS、jQuery、Angular 本身）都会对我有很大帮助。希望得到任何。谢谢大家！

Answer 1

没有 DOM 事件，我知道这里是在 Save file UI 对话框打开或关闭时触发的。

您可以尝试利用 focus 事件来捕捉 Save file 对话框何时关闭并且 window 在 <a> 元素上调用 .click() 后重新获得焦点download 属性集，虽然这种方法并不完全可靠。

// append or display spinner element here
var csvUrl = document.createElement("a"); 
csvUrl.href = url; 
csvUrl.download = "csv_filename"; 
csvUrl.click();
window.onfocus = function () { 
  document.body.removeChild(csvUrl); 
  // remove or hide spinner element here 
  window.onfocus = null; 
}