HTML 頁面嵌入另一頁面的兩種方案（非 iframe）

需求

將一個 HTML 頁面嵌入另一頁面，點擊左側菜單只更新右側內容，不使用 <iframe>。

方案一：模板引擎 / 頁面裝飾框架

使用 Sitemesh 等裝飾器框架，定義公共佈局（左側菜單、頂部等），內容頁面只編寫主體部分，裝飾器自動組合。參考：Sitemesh 實戰。

方案二：單頁面 + CSS/JS 切換顯示

在一個頁面中，將所有「右側內容」放入不同的 <div>，默認 display:none 隱藏。左側菜單點擊事件通過 JS 切換對應 div 的顯示/隱藏。

<div id="content1" class="panel">內容1</div>
<div id="content2" class="panel" style="display:none">內容2</div>
<script>
  document.querySelectorAll('.menu-item').forEach(item => {
    item.onclick = () => {
      document.querySelectorAll('.panel').forEach(p => p.style.display = 'none');
      document.getElementById(item.dataset.target).style.display = 'block';
    };
  });
</script>

選型建議

• 靜態內容少、交互簡單：方案二輕量易維護。
• 多頁面復用佈局、需服務端組裝：方案一更規范。
• 現代前端框架（Vue/React）下推薦使用路由 + 組件嵌套實現。