如何获取 IFRAME 的下载进度答案

【问题标题】：How to get download progress of an IFRAME如何获取 IFRAME 的下载进度
【发布时间】：2011-07-26 18:53:57
【问题描述】：

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

我尝试在 MSDN 中搜索解决方案，现在我想知道是否可以使用以下任何一种：

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

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

【问题讨论】：

如果我尝试构建它，我会选择 onreadystatechange 解决方案。
它只给了我关于 2 个状态的信息：“正在加载”和“完成”......恐怕这对于进度条来说还不够。

标签： javascript iframe download progress-bar

【解决方案1】：

嗯...... 11 年后，我看到它没有得到答复，但你的进度条仍然存在！

我一直在寻找相同的东西并最终使用了 fetch 来实现此增强功能：https://github.com/AnthumChris/fetch-progress-indicators/blob/master/fetch-enhanced/supported-browser.js

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

然后你可以这样做：

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 进行了额外的跳转。

【讨论】：