動態頁面生成靜態 HTML 四種包含外部頁面技術比較

靜態頁面存取速度優於動態頁面。生成靜態頁後，常需包含外部動態內容 (如最新公告、登入狀態)。本文比較四種主流技術：IFrame、Scriptlets (HTC)、JavaScript document.write、Server-Side Includes (SSI)。

方案一：IFrame 內嵌框架

<iframe name="dynamicPart" src="latestNews.htm" width="100%" height="200" 
    frameborder="0" scrolling="no" allowtransparency="true"></iframe>

• 優點：實作簡單、瀏覽器相容性佳、可獨立快取、支援跨域
• 缺點：SEO 不利 (搜尋引擎難索引框架內容)、高度自適應複雜、雙滾動條風險、背景色整合需 allowtransparency
• 適用：廣告位、第三方元件、獨立功能模組

方案二：Scriptlets / HTC (Windows Script Components)

<object style="border:0" type="text/x-scriptlet" data="dynamicPart.htm" width="100%" height="200"></object>

• 優點：IE 原生支援、有獨立事件/屬性/方法模型
• 缺點：僅 IE 支援、不透明矩形區域難融合紋理背景、已淘汰技術
• 適用：純內網 IE 環境、舊系統維護

方案三：JavaScript document.write 外部腳本

<!-- 靜態頁面包含位置 -->
<script src="dynamicPart.js"></script>

<!-- dynamicPart.js 內容 -->
document.write('<div class="news">');
document.write('  <h3>最新公告</h3>');
document.write('  <ul><li>項目一</li><li>項目二</li></ul>');
document.write('</div>');

• 優點：與宿主頁面完美融合、無額外 DOM 結構、可動態生成
• 缺點：SEO 極差 (搜尋引擎不執行 JS)、維護困難 (HTML 字串拼接)、阻塞頁面渲染、需重新生成 JS 檔才能更新
• 適用：非 SEO 關鍵區塊、極簡動態片段

方案四：Server-Side Includes (SSI) - 推薦

<!-- #include virtual="/includes/latestNews.asp" -->  <!-- IIS/Apache 支援 -->
<!-- #include file="includes/latestNews.asp" -->   <!-- 相對路徑 -->

• 優點：伺服器端組合、輸出完整 HTML、SEO 友善、快取可控、維護容易 (獨立檔案)
• 缺點：需 Web 伺服器支援 (IIS 需啟用 SSI、副檔名通常為 .shtml/.shtm/.asp)、動態語言執行需對應處理器
• 適用：導航列、頁尾、側邊欄等全站共用區塊

IIS 啟用 SSI 設定

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".shtml" mimeType="text/html" />
  </staticContent>
  <handlers>
    <add name="SSI-html" path="*.shtml" verb="*" 
         modules="ServerSideIncludeModule" resourceType="File" />
  </handlers>
</system.webServer>

現代替代方案比較

最佳實務建議

1. 優先使用伺服器端組合：ASP.NET MVC @Html.Partial、@await Html.RenderPartialAsync、WebForms UserControl
2. 靜態化生成時：在產生靜態檔階段直接將共用區塊內容內嵌 (字串取代/模板引擎)
3. 必須客戶端動態載入：使用 fetch() + innerHTML 替代 document.write，並提供 `
4. 高流量站點：部署 Varnish/Nginx + ESI，在邊緣層組合頁面片段