Chrome 上的 XMLHttpRequest onprogress total 始终为 0

Posted 2023-02-22

【中文标题】Chrome 上的 XMLHttpRequest onprogress total 始终为 0

【英文标题】：XMLHttpRequest onprogress total is always 0 on Chrome

【发布时间】：2015-03-02 07:22:53

【问题描述】：

我试图在从同一网站的一个页面导航到另一个页面之前显示一个进度条。

我的函数将 updateProgress 函数绑定到 XMLHttpRequest onprogress 事件，并将用户重定向到 (xhr.readyState == 4 && xhr.status == 200) 上的新页面 除了 Chrome 将“总计”显示为零之外，它似乎工作正常，这不会让进度条正常工作。我的代码如下。

提前谢谢你...

$('.ajaxNavi').click(function (e) 
  e.preventDefault();
  var url = $(this).attr('href');
  var xhr = new XMLHttpRequest();
  xhr.onprogress = updateProgress;
  xhr.onreadystatechange = function ()  
    if (xhr.readyState == 4 && xhr.status == 200)
    // REDIRECT HERE
    
  );
  xhr.open("GET", url, true);
  xhr.setRequestHeader("Content-Type", "text/html");
  xhr.send();
);

function updateProgress(e) 
  console.log(e.loaded + '    ' + e.total);

【问题讨论】：

是 Chrome 特有的问题吗？

但它是一个更大的 html 页面吗？检查开发者工具中的网络选项卡，检查请求是否正在发送内容长度标头

请求头没有内容长度...响应头：Content-Length:5410 Content-Type:text/html; charset=utf-8

在使用属性确定进度之前，您需要检查它是否可计算（e.lengthComputable）。

那是我不明白的部分。对于 mozilla，它是 e.lengthComputable 'true'，但对于 chrome 不是......如果另一个基于 txt 的文件被指定为 url 而不是 html，那么对于 Chrome 也是 'true'。例如，我尝试使用“/Site.master”并且是可计算的。当我将其更改为html时，它不是...

【参考方案1】：

迟了两年，不过这个问题好像有很多观点，应该应该回答一下吧。

根据this 问题，压缩后的响应在 Chrome 中将始终将 lengthComputable 设置为 false。这很有意义，因为您可能知道还有多少压缩数据从管道中传出，但您不知道压缩数据将扩展到多少。

这个solution 对我来说似乎不错。