本文介绍一种轻量、兼容性好且无需复杂框架的方法，使用原生 html `
在您的场景中，核心目标是：复用统一导航结构（顶部下拉菜单 + 左侧边栏），同时让 zuojiankuohaophpcnmain> 区域根据用户选择动态加载不同部门对应的设备手册、蓝图等 HTML 页面，从而避免在每个 HTML 文件中重复编写菜单代码，极大提升后期维护效率。
虽然您曾考虑 PHP 或 JavaScript（如 fetch() + innerHTML），但需注意：
- ✅ PHP 方案需服务器支持，且对纯静态部署（如直接双击打开 index.html）不生效；
- ⚠️ 现代 JS 方案（如 fetch + DOM 操作） 在老旧 Android 浏览器（如旧版 Chrome for Android 或 WebView）中可能存在兼容性风险（如不支持 Promise、async/await 或 CORS 限制）；
- ✅ <iframe> 方案 是最稳妥的选择：它原生支持所有浏览器（包括 IE8+ 和旧版 Android WebView），无需 JavaScript，服务端零逻辑，且天然隔离样式与脚本冲突。
✅ 推荐实现：用 <iframe> 替代 <main> 内容
将您原始 HTML 中的 <main> 标签及其内容整体替换为一个命名 <iframe>，并为所有菜单链接添加 target="contentFrame" 属性：
<!-- 替换原 <main>...</main> 区域 --> <iframe name="contentFrame" src="pages/shipping.html" width="100%" height="600" frameborder="0" style="border: none; min-height: 600px;" ></iframe>
然后修改菜单链接——所有需要加载新内容的 <a> 标签均需指定 target="contentFrame"：
立即学习“前端免费学习笔记（深入）”；
▶ 顶部下拉菜单示例（以 Fabrication 子项为例）：
<li> <a href="pages/fabrication_manuals.html" target="contentFrame">Manuals</a> </li> <li> <a href="pages/fabrication_blueprints.html" target="contentFrame">Blueprints</a> </li>
▶ 左侧边栏菜单示例：
<nav id="sidebar"> <a href="pages/directory.html" target="contentFrame">Directory</a> <a href="pages/parts_catalog.html" target="contentFrame">Parts</a> <a href="pages/pto_schedules.html" target="contentFrame">PTO</a> <!-- 其他链接同理 --> </nav>
? 关键原理：target="contentFrame" 会强制该链接在名称为 contentFrame 的 <iframe> 中打开，无需任何 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 文件只需包含纯内容片段（无需 <html><head><body> 等完整结构），例如 pages/shipping.html：
<h2>Shipping Department Resources</h2> <ul> <li><a href="docs/ship-log-template.xlsx" download>Shipping Log Template (XLSX)</a></li> <li><a href="docs/carrier-rates.pdf">Carrier Rate Sheet (PDF)</a></li> <li><a href="https://internal-ftp.hd.local/ship/">FTP Upload Portal</a></li> </ul>
⚠️ 注意事项与优化提示
-
样式隔离：<iframe> 内容默认独立于父页面样式。若需统一字体/颜色，可在每个 pages/*.html 中引入相同 CSS：
<link rel="stylesheet" href="../css/hd_style.css"> - 移动端适配：为 <iframe> 添加 style="width:100%; min-height:50vh;" 并设置 height="auto"（部分老浏览器不支持，可配合简单 JS 回退）；
- 初始加载：<iframe src="pages/shipping.html"> 确保首次打开 index.html 时即显示默认内容；
- SEO 与可访问性：内网系统通常无需 SEO；若需屏幕阅读器支持，可添加 title 属性：<iframe title="Main content area" ...>；
- 替代方案（进阶）：当未来设备升级后，可平滑迁移到现代 JS 方案（如 fetch() + replaceChildren()），逻辑更灵活，但当前 <iframe> 是最务实、零风险的选择。
通过这一方案，您只需维护一份 index.html 和多个轻量 pages/*.html，菜单点击即实时切换内容，完美契合“易维护、强兼容、低依赖”的内网需求。
