javascript - 如何获取 IFRAME 的下载进度

Question

我想显示在 iframe 中下载某些文档的进度。我创建了这个 JavaScript progress bar现在我想用它作为下载进度指示器。我知道与 ajax 一起使用是可能的，但是以传统方式加载文件/文档呢？

我试图在 MSDN 中搜索解决方案，现在我想知道是否可以使用其中任何一个:

window.onreadystatechange/document.onreadystatechange

document.onprogress 事件 - 我不确定它是否被 IE 以外的其他浏览器支持，以及它是否完全应用于下载进度。

还是我应该看看别的地方...？

Answer 1

嗯...... 11 年后，我看到它没有答案，但你的进度条仍然存在!
我一直在寻找同样的东西，最后使用了一个 fetch，实现了这个增强:https://github.com/AnthumChris/fetch-progress-indicators/blob/master/fetch-enhanced/supported-browser.js
这段代码根据内容长度 header 检查 fetch 响应的读取数据量，并将其变成一个易于使用的钩子(Hook)。如果愿意，也可以自己实现类似的东西。
然后您可以执行以下操作:

let progress = 0;
const fetcher = new ProgressReportFetcher({loaded, total} => {
  progress = (loaded / total) * 100;
});

let iframeSrc;
fetcher.fetch(resourceUrl)
  .then((response) => response.arrayBuffer())
  .then((arrayBuffer) => new Blob([arrayBuffer], { type: 'application/pdf' })) // see note below
  .then((blob) => window.URL.createObjectURL(blob))
  .then((url) => {
    iframeSrc = url;
  });

(或者，如果你想把它移植回 11 年前的 javascript，这个的一些 jquery 变体......)
注意，我在这里把它变成了 PDF。制作blob时需要设置mimetype，否则会看到乱码数据，以及原生的 response.blob()不幸的是，方法不支持这样做。因此，通过 arrayBuffer 的额外跳转。