JSP 父頁面獲取隱藏子頁面內容的兩種方案比較

在 JSP 開發中，常遇到父頁面需要獲取隱藏子頁面（模板）內容的需求。若直接使用 <jsp:include> 導入大量模板，會導致父頁面體積龐大、加載緩慢。本文探討兩種替代方案及其優缺點。

方案一：AJAX 異步請求

實現方式：父頁面透過 AJAX 請求子頁面，子頁面接收 id 參數，經 Java 與 JavaScript 變量交互後，返回對應模板內容。

缺點：

• JavaScript 變量轉 Java 變量較繁瑣，需借助表單提交
• JSP 腳本在伺服器端執行，消耗伺服器資源
• 增加網路交互次數，影響響應速度

方案二：iframe 嵌入

實現方式：使用 <iframe> 引入子頁面，再透過 jQuery 選取器獲取內容：$(iframe.contents().find("#" + id)[0]).val()。

缺點：

• 不確定 iframe 是否支援延遲加載
• 若同 <include> 一樣一次性載入整頁，則無法解決效能問題

建議與替代思路

若模板數量極大，建議考慮：

1. 模板預編譯：構建時將模板編譯為 JavaScript 模板函數
2. 按需加載：配合 RequireJS 或 ES Module 動態導入
3. 後端模板引擎：如 FreeMarker、Thymeleaf 只渲染所需片段
4. 前端框架組件化：Vue/React 組件動態註冊與加載

選型時需權衡專案架構、團隊技術棧與維護成本。