GitHub Pages加载子文件夹iframe页面返回404，本地正常

问题描述 #

在GitHub Pages托管的游戏网站https://username.github.io中，首页index.html正常运行，但点击按钮通过iframe加载game1/game1.html等子页面时返回404错误，直接访问子页面URL也失败。本地运行时一切正常，且已确认文件夹和文件名（含大小写）完全匹配。

目录结构：

/
├── index.html
├── game1/
│   ├── game1.html
│   ├── css/
│   └── js/
├── game2/
│   ├── game2.html
│   ├── css/
│   └── js/

解决方案 #

1. 确认仓库文件提交完整性 #

登录GitHub仓库，查看文件列表，确保game1/、game2/文件夹及其内部所有文件（game1.html、css/、js/下的资源）都已成功提交。若存在未追踪文件，检查.gitignore规则是否误排除了这些文件，执行git add .、git commit、git push重新提交。

2. 检查GitHub Pages部署状态 #

进入仓库「Settings」→「Pages」页面，查看最新部署记录：

• 确认部署过程无报错，若有错误提示，根据日志修复问题。
• 注意部署存在延迟，提交代码后等待3-5分钟再测试访问。

3. 修正路径引用方式 #

将相对路径改为根相对路径，避免环境差异导致的路径解析错误：
修改index.html中的按钮代码：

<button onclick="openGame('/game1/game1.html')">Open Game 1</button>
<button onclick="openGame('/game2/game2.html')">Open Game 2</button>

根相对路径以/开头，强制从网站根目录定位文件，消除相对路径的不确定性。

4. 验证子页面内部资源路径 #

打开game1.html、game2.html，检查其中CSS、JS文件的引用路径：

• 确保使用的相对路径（如./css/style.css）对应子文件夹内的实际文件，且这些资源已提交到仓库。
• 若子页面资源路径错误，会导致子页面自身加载失败，间接表现为iframe 404或白屏。

5. 清除缓存测试 #

使用浏览器隐私窗口访问网站，避免旧缓存影响测试结果。若仍有问题，在GitHub Pages页面点击「Deploy from branch」重新触发部署。

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