如何获取 IFRAME 的下载进度

Question

我想显示在 iframe 中下载某些文档的进度。我已经创建了这个JavaScript 进度条，现在我想将它用作下载进度指示器。我知道与 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

这段代码根据内容长度标头检查 fetch 响应读取的数据量，并将其变成一个易于使用的钩子。如果愿意的话，人们也可以自己实现类似的东西。

然后你可以做类似的事情：

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 变体......）

Nb，我在这里把它变成了PDF。制作 blob 时需要设置 mimetype，否则会看到乱码数据，不幸的是，原生的response.blob()方法不支持这样做。因此需要额外跳转 arrayBuffer。