HTML页面切换技巧与方法解析

常见错误现象：404（路径写错）、白屏（JS 没加载完就执行）、历史记录断层（后退键失效）、SEO 友好性丢失（搜索引擎只抓初始 HTML）。

• 适用场景：后台管理页、多步骤表单、产品介绍 tab 切换、轻量级 SPA
• 不适用场景：需要独立 URL SEO 的营销页、大量第三方脚本依赖完整重载的旧系统
• 关键点：每次切换前清空目标容器，再插入新内容；手动调用 history.pushState() 同步地址栏

用 fetch + innerHTML 实现最简切换

不需要框架，几行 JS 就能跑通。重点不是“怎么取数据”，而是“怎么安全塞进去”。innerHTML 快但危险，必须确保内容来源可信（比如自己写的 HTML 字符串或同域 API 返回的纯结构化 HTML 片段）。

示例逻辑：

const viewContainer = document.getElementById('view');
fetch('/pages/dashboard.html')
  .then(r => r.text())
  .then(html => {
    viewContainer.innerHTML = html; // 注意：这里不会执行 script 标签
    initDashboard(); // 手动触发对应模块初始化
  });

• 如果返回的是 JSON（如 { title: '首页', content: '

  欢迎

  ' }），需拼接成完整 HTML 片段再赋值
• fetch 失败时务必加 .catch，否则静默失败，用户卡在旧页面
• 切换后焦点丢失？记得 viewContainer.focus() 或设置 tabindex="-1" 后主动聚焦

history.pushState 和 popstate 不能少

只改内容不改 URL，用户刷新就回到首页；不监听 popstate，后退键就失效。这两步不是可选项，是单页切换的基础设施。

• 切换时调用 history.pushState({ page: 'dashboard' }, '', '/dashboard')
• 监听 window.addEventListener('popstate', e => renderPage(e.state.page))
• 注意：服务端必须对所有可能的路由（如 /dashboard、/profile）都返回同一份 HTML（即 fallback 到 index.html），否则直接访问子路径会 404
• 开发时用 http-server -s 或 Vite 的 dev server，它们默认支持 SPA fallback；Nginx 需配 try_files $uri $uri/ /index.html;

script 标签不执行？这是设计使然，不是 bug

用 innerHTML = htmlString 插入含