如何让U盘内的网站代码在Windows和Chromebook设备上正常运行？

最优方案：使用相对路径 #

绝对路径（如G:\HomePage.html）依赖设备的盘符分配，跨设备必然失效。改用相对路径是最可靠的解决方式，只要U盘内的文件结构不变，任何设备都能正常识别：

修改步骤： #

1. 确认U盘内的文件结构：假设网站文件都在U盘根目录，Information文件夹也在根目录下
2. 将所有G:\开头的绝对路径替换为相对路径：
   • G:\HomePage.html → ./HomePage.html（./表示当前文件所在的根目录）
   • G:\Information\Info.html → ./Information/Info.html

修改后的导航按钮代码示例： #

<div id="NavButtons">
<a href="./HomePage.html"><button style="vertical-align: middle" class="Theactualbuttons">Home</button></a>
<a href="./Information/Info.html"><button style="vertical-align: middle" class="Theactualbuttons">Information</button></a>
<a href="./Curriculum.html"><button style="vertical-align: middle" class="Theactualbuttons">Curriculum</button></a>
<a href="./StaffDirectory.html"><button style="vertical-align: middle" class="Theactualbuttons">Staff Directory</button></a>
<a href="./StudentActivities.html"><button style="vertical-align: middle" class="Theactualbuttons">Student Activities</button></a>
<a href="./Organizations.html"><button style="vertical-align: middle" class="Theactualbuttons">Organizations</button></a>
</div>

注意：原代码中多个按钮使用了相同的id="Theactualbuttons"，违反HTML规范（id必须唯一），建议改为class="Theactualbuttons"。

备选方案：JavaScript多路径尝试逻辑 #

如果确实需要保留多路径尝试的逻辑，以下是可复现的代码，原理是先尝试相对路径，失败后再尝试Windows盘符路径：

实现代码： #

<!-- 修改导航按钮，用onclick触发跳转函数 -->
<div id="NavButtons">
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./HomePage.html', 'G:\\HomePage.html'])">Home</button>
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./Information/Info.html', 'G:\\Information\\Info.html'])">Information</button>
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./Curriculum.html', 'G:\\Curriculum.html'])">Curriculum</button>
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./StaffDirectory.html', 'G:\\StaffDirectory.html'])">Staff Directory</button>
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./StudentActivities.html', 'G:\\StudentActivities.html'])">Student Activities</button>
<button style="vertical-align: middle" class="Theactualbuttons" onclick="tryNavigate(['./Organizations.html', 'G:\\Organizations.html'])">Organizations</button>
</div>

<script>
async function tryNavigate(paths) {
  for (const path of paths) {
    try {
      // 尝试请求文件头，判断路径是否可达
      const response = await fetch(path, { method: 'HEAD' });
      if (response.ok) {
        window.location.href = path;
        return;
      }
    } catch (err) {
      // 当前路径不可达，继续尝试下一个
      continue;
    }
  }
  // 所有路径都失败时提示用户
  alert('无法找到目标页面，请检查U盘内的文件是否完整');
}
</script>

注意：部分浏览器在file://协议下可能限制fetch操作，导致此逻辑失效，因此优先推荐使用相对路径方案。

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