Chrome应用中XMLHttpRequest加载外部HTML无结果问题求助

嘿，我一眼就看出你代码里的问题啦——核心是异步请求的时机没处理对，再加上Chrome应用的权限限制，才导致页面没任何结果的。咱们一步步来解决：

1. 先搞定异步逻辑的核心问题 #

你用的XMLHttpRequest是异步执行的，当你调用readTextFile后立刻返回rawFile.responseText时，请求还在后台跑呢，根本没拿到数据，自然返回空值。得等请求完成后再去更新DOM才行，我给你改了个回调版本，贴合你原来的代码结构：

// 先把目标元素初始化，避免显示异常
document.getElementById("Text").innerHTML = "加载中...";

// 传个回调函数，等请求完成后再更新内容
readTextFile("https://dl.dropboxusercontent.com/s/ha5x038iurobx6x/Message.txt", function(allText) {
  document.getElementById("Text").innerHTML = allText;
});

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function () {
    if(rawFile.readyState === 4) {
      if(rawFile.status === 200 || rawFile.status == 0) {
        var allText = rawFile.responseText;
        // 请求成功，把数据传给回调函数去更新DOM
        callback(allText);
      } else {
        // 加个错误提示，方便排查问题
        callback("加载失败，状态码：" + rawFile.status);
      }
    }
  }
  rawFile.send();
}

2. 配置Chrome应用的权限 #

Chrome应用有严格的跨域限制，你得在manifest.json里添加目标域名的权限，不然请求会被拦截：

如果是Manifest V3（现在推荐的版本），要加host_permissions：

{
  "manifest_version": 3,
  "name": "你的应用名称",
  "version": "1.0",
  "host_permissions": [
    "https://dl.dropboxusercontent.com/*"
  ]
}

要是你用的是Manifest V2，直接把域名加到permissions数组里就行。

额外的优化建议 #

现在浏览器更推荐用fetch API，代码更简洁易读，我也给你写个版本：

async function loadExternalText() {
  const textElement = document.getElementById("Text");
  textElement.innerHTML = "加载中...";
  try {
    const response = await fetch("https://dl.dropboxusercontent.com/s/ha5x038iurobx6x/Message.txt");
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    const text = await response.text();
    textElement.innerHTML = text;
  } catch (err) {
    textElement.innerHTML = "加载出错：" + err.message;
  }
}

// 调用函数加载内容
loadExternalText();

这个版本同样需要配置对应的host_permissions哦。

内容的提问来源于stack exchange，提问作者MoonEater916