本地HTML/JS视频GUI加载同目录TXT文件遇XMLHttpRequest问题

嘿，我懂你现在的困扰——把服务器端的视频GUI改成离线本地版后，原本用XMLHttpRequest加载TXT书签的功能失效了对吧？这其实是浏览器的同源安全策略在起作用：当你直接打开本地HTML文件（用file://协议）时，浏览器会限制XMLHttpRequest这类网络请求，哪怕是读取同目录的本地文件也不行，因为它默认认为本地文件环境存在安全风险。

下面给你几个实用的解决方案，按推荐程度排序：

1. 搭建本地轻量服务器（最推荐，完美兼容原有代码） #

这是最简单的方法，只需要在你的文件目录里启动一个临时服务器，这样浏览器就会用http://localhost协议访问你的文件，XMLHttpRequest就能正常工作了，完全不用修改原有代码。

具体操作： #

• 如果你的电脑装了Python：

  • 打开终端/命令行，进入HTML/TXT文件所在的目录
  • 运行命令：
    • Python 3.x：python -m http.server 8000
    • Python 2.x：python -m SimpleHTTPServer 8000
  • 然后在浏览器里访问 http://localhost:8000/你的HTML文件名.html，原来的loadBookmarks函数就能正常加载同目录的TXT文件了。

• 如果装了Node.js：

  • 先全局安装http-server：npm install -g http-server
  • 进入文件目录，运行：http-server -p 8000
  • 同样访问http://localhost:8000/你的HTML文件名.html即可。

2. 改用FileReader API（无需服务器，但需要用户手动选择文件） #

如果你不想搭服务器，可以用浏览器的FileReader API来读取本地文件，但这个方法需要用户手动选择TXT文件，而不是自动加载同目录的。适合不需要自动加载的场景。

代码示例： #

首先在HTML里加一个文件选择控件：

<input type="file" id="bookmarkFile" accept=".txt">

然后修改loadBookmarks函数：

function loadBookmarks() {
  const fileInput = document.getElementById('bookmarkFile');
  fileInput.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = function(event) {
      const txtContent = event.target.result;
      // 这里写你原来处理TXT内容的逻辑，比如解析书签
      console.log('加载的书签内容：', txtContent);
    };
    reader.readAsText(file);
  });
}

// 初始化调用
loadBookmarks();

3. 将TXT内容直接嵌入JavaScript（适合内容固定的情况） #

如果你的TXT文件内容不常变化，最简单的方法就是把TXT里的内容直接复制到JS里作为一个字符串变量，这样完全不需要任何文件读取操作。

示例： #

function loadBookmarks() {
  // 把TXT文件里的内容直接粘贴到这里
  const bookmarkContent = `
  这里是你的TXT文件内容
  比如书签条目1
  书签条目2
  `;
  // 然后处理这个字符串即可
  console.log('书签内容：', bookmarkContent);
}

这样调整后，你的离线GUI就能正常获取书签内容啦。

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