Bootstrap 側邊欄固定、內容區動態加載：iframe 與 Sitemesh 方案對比

業務場景

左側垂直導航欄，右側內容區。點擊左側菜單鏈接，**左側菜單不刷新/保持狀態**，右側區域加載對應頁面。

方案一：iframe (最簡單、隔離性強、但有體驗缺陷)

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div class="sidebar-sticky">
        <ul class="nav flex-column">
          <li class="nav-item">
            <a class="nav-link" href="page1.html" target="contentFrame">頁面 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="page2.html" target="contentFrame">頁面 2</a>
          </li>
        </ul>
      </div>
    </nav>

    <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
      <iframe name="contentFrame" src="dashboard.html" 
              style="width:100%; height:calc(100vh - 56px); border:none;"></iframe>
    </main>
  </div>
</div>

優點： 實現極簡、頁面完全隔離 (CSS/JS 不衝突)、瀏覽器原生支持歷史/刷新。
缺點： **URL 不變** (無法分享/收藏具體頁面)、跨域受限、高度自適應麻煩、SEO 不友好、打印/滾動體驗差、移動端適配困難。

方案二：Sitemesh / 服務端裝飾模式 (傳統 Java Web、需後端配合)

• 後端 (Spring MVC/Struts2) 使用 Sitemesh 裝飾器，提取公共佈局 (側邊欄、頭部)。
• 每個業務頁面只寫內容區 <div id="content">...</div>。
• 請求時裝飾器自動組裝完整頁面返回。
• 優點： URL 正常、SEO 友好、服務端渲染性能好、無前端框架依賴。
• 缺點： **強綁定後端技術棧**、前後端不分離、局部刷新需 AJAX+片段渲染、現代 SPA 體驗難實現。

方案三：前端路由 SPA (Vue/React + Router) —— 現代標準 (強烈推薦)

// Vue 3 + Vue Router 4 示例
// App.vue


// router/index.js
const routes = [
  { path: '/', redirect: '/dashboard' },
  { path: '/dashboard', component: () => import('@/views/Dashboard.vue') },
  { path: '/users', component: () => import('@/views/Users.vue') },
  // 懶加載，按需下載 JS
]

優點： **無刷新切換、URL 同步 (History 模式)、組件復用、狀態保持 (keep-alive)、代碼分割懶加載、TypeScript 支持、生態豐富、移動端完美適配**。
缺點： 需學習前端框架、首屏加載稍大 (可 SSR/SSG 優化)、SEO 需額外配置 (Nuxt/Next.js)。

方案四：AJAX 片段加載 (jQuery 時代遺風、不推薦新項目)

$('.nav-link').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('#content-area').load(url + ' #content-fragment', function() {
        // 回調中重新綁定 JS 事件、初始化插件
    });
    // 手動 pushState 更新 URL
    history.pushState(null, '', url);
});

缺點： **JS/CSS 污染、事件重綁麻煩、無組件化、狀態管理混亂、歷史狀態同步難、本質是「貧血的 SPA」**。

選型建議

總結

**Bootstrap 側邊欄固定、內容動態加載：iframe 最簡單但體驗差，Sitemesh 需後端強綁定。** **新項目請直接上 Vue/React + Router 構建 SPA**，獲得最佳開發體驗、用戶體驗與長期可維護性。僅在極度受限的存量系統維護中考慮 iframe/Sitemesh。