如何通过点击菜单项动态加载外部 HTML 内容
本文介绍一种轻量、兼容性好且无需复杂框架的方法，使用原生 html `
在您的场景中，核心目标是：复用统一导航结构（顶部下拉菜单 + 左侧边栏），同时让
虽然您曾考虑 PHP 或 JavaScript（如 fetch() + innerHTML），但需注意：
- ✅ PHP 方案需服务器支持，且对纯静态部署（如直接双击打开 index.html）不生效；
- ⚠️ 现代 JS 方案（如 fetch + DOM 操作） 在老旧 Android 浏览器（如旧版 Chrome for Android 或 WebView）中可能存在兼容性风险（如不支持 Promise、async/await 或 CORS 限制）；
- ✅ 是最稳妥的选择：它原生支持所有浏览器（包括 IE8+ 和旧版 Android WebView），无需 JavaScript，服务端零逻辑，且天然隔离样式与脚本冲突。
✅ 推荐实现：用
将您原始 HTML 中的
然后修改菜单链接——所有需要加载新内容的 标签均需指定 target="contentFrame"：
▶ 顶部下拉菜单示例（以 Fabrication 子项为例）：
▶ 左侧边栏菜单示例：
? 关键原理：target="contentFrame" 会强制该链接在名称为 contentFrame 的 中打开，无需任何 JS，完全由浏览器原生行为驱动。
? 文件组织建议（提升可维护性）
为便于管理，建议按功能建立 pages/ 目录：
index.html ← 主入口页（含 iframe 和菜单） pages/ ├── shipping.html ├── fabrication_manuals.html ├── fabrication_blueprints.html ├── weld_procedures.html ├── paint_specs.html ├── assembly_checklist.html └── office_forms.html
每个 pages/*.html 文件只需包含纯内容片段（无需
等完整结构），例如 pages/shipping.html：Shipping Department Resources
- Shipping Log Template (XLSX)
- Carrier Rate Sheet (PDF)
- FTP Upload Portal
⚠️ 注意事项与优化提示
- 样式隔离：
- 移动端适配：为
- 初始加载：
- SEO 与可访问性：内网系统通常无需 SEO；若需屏幕阅读器支持，可添加 title 属性：
-
替代方案（进阶）：当未来设备升级后，可平滑迁移到现代 JS 方案
（如 fetch() + replaceChildren()），逻辑更灵活，但当前
（如 fetch() + replaceChildren()），逻辑更灵活，但当前
通过这一方案，您只需维护一份 index.html 和多个轻量 pages/*.html，菜单点击即实时切换内容，完美契合“易维护、强兼容、低依赖”的内网需求。
