在 JSP 頁面嵌入 `` 時，常需根據內容高度動態調整 iframe 高度，避免雙滾動條或內容截斷。本文提供純 JavaScript 解決方案，利用 `location.hash` 跨域傳遞高度資訊，相容同域與子域場景。</p> <h2>核心原理</h2> <ol> <li>父頁面載入時，計算自身文件高度 (`document.documentElement.scrollHeight`)。</li> <li>將高度作為 hash 參數附加到 iframe `src` (如 `/test.jsp#1200`)。</li> <li>iframe 內頁面 (`test.jsp`) `onload` 時，解析 `location.hash` 取得高度。</li> <li>透過 `parent.parent.document.getElementById('infoFrame')` 找到父頁面的 iframe 元素，設定其 `style.height`。</li> </ol> <h2>父頁面程式碼 (main.jsp)</h2> <pre><code><iframe id="agentFrame" name="agentFrame" src="" width="0" height="0" style="display:none;"></iframe> <script type="text/javascript"> function sethash() { // 1. 取得父頁面文件完整高度 var hashH = document.documentElement.scrollHeight; // 2. 目標 iframe 頁面 (同域或子域) var urlC = "/test.jsp"; // 3. 將高度編碼進 hash，觸發 iframe 載入 document.getElementById("agentFrame").src = urlC + "#" + hashH; } // 頁面載入完成後執行 window.onload = sethash; </script></code></pre> <h2>iframe 內頁面程式碼 (test.jsp)</h2> <pre><code><%@ page contentType="text/html;charset=GBK" language="java" %> <script> function pseth() { // 1. 取得父頁面中真正顯示內容的 iframe 元素 (假設 id='infoFrame') var iObj = parent.parent.document.getElementById('infoFrame'); // 2. 從 agentFrame 的 location.hash 解析高度 // 注意：此處存取的是 agentFrame 的 location，非當前 test.jsp var iObjH = parent.parent.frames["infoFrame"].frames["agentFrame"].location.hash; // 3. 格式：#1200 → 分割取得數值 var height = iObjH.split("#")[1] + "px"; // 4. 套用高度 iObj.style.height = height; } window.onload = pseth; </script></code></pre> <h2>關鍵點與注意事項</h2> <table> <thead><tr><th>項目</th><th>說明</th></tr></thead> <tbody> <tr><td>iframe 隱藏</td><td>`agentFrame` 設為 `width=0 height=0 display:none`，僅作為傳遞通道，不顯示內容。</td></tr> <tr><td>雙層 iframe 結構</td><td>範例假設結構：`main.jsp` → `infoFrame` (顯示用) → `agentFrame` (傳遞用)。實際專案請依實際 DOM 階層調整 `parent.parent` 層數。</td></tr> <tr><td>同源策略</td><td>父頁面與 `test.jsp` **必須同域** (或透過 `document.domain` 設定為同一主域)，否則無法存取 `parent.parent.document`。跨域請改用 `postMessage` API。</td></tr> <tr><td>時機</td><td>父頁面 `window.onload` 確保文件高度已穩定；`test.jsp` `window.onload` 確保 hash 已附加完成。</td></tr> <tr><td>動態內容</td><td>若 iframe 內容會動態變化 (AJAX 載入、摺疊展開)，需在內容變更後重新呼叫 `pseth()` 或改用 `MutationObserver` 監聽高度變化並 `postMessage` 通知父頁面。</td></tr> </table> <h2>現代化替代方案：`window.postMessage` (推薦)</h2> <p>HTML5 `postMessage` 提供安全跨域通訊，不依賴 hash hack，支援跨域、更清晰：</p> <h3>父頁面</h3> <pre><code><iframe id="contentFrame" src="/child.jsp" onload="iframeLoaded()"></iframe> <script> function iframeLoaded() { // 監聽子頁面訊息 window.addEventListener("message", function(e) { // 安全性：驗證來源 if (e.origin !== "https://your-trusted-domain.com") return; if (e.data && e.data.type === "resize" && e.data.height) { document.getElementById("contentFrame").style.height = e.data.height + "px"; } }); } </script></code></pre> <h3>子頁面 (child.jsp)</h3> <pre><code><script> function notifyHeight() { var height = document.documentElement.scrollHeight; // 發送給父頁面 parent.postMessage({ type: "resize", height: height }, "https://parent-domain.com"); } // 初始載入 + 內容變動時呼叫 window.onload = notifyHeight; // 若有動態內容，在 AJAX 完成、摺疊切換後呼叫 notifyHeight() </script></code></pre> <h2>常見問題排查</h2> <ul> <li><strong>高度為 0 或異常</strong>：父頁面 `scrollHeight` 取值時機過早 (CSS 未套用、圖片未載入) → 改用 `window.onload` 或 `imagesLoaded` 插件。</li> <li><strong>權限錯誤 (Permission denied)</strong>：跨域存取 `parent.document` → 改用 `postMessage` 或設定 `document.domain` (僅限同主域子域)。</li> <li><strong>無限迴圈</strong>：父頁面調整高度觸發子頁面 `onload` 再次傳遞 → 加入旗標或防抖機制。</li> <li><strong>IE 相容性</strong>：IE8- 不支援 `postMessage`，若需支援舊 IE 必須用 hash 方案或 `XDomainRequest`。</li> </ul> <div class="summary">傳統 `location.hash` 方案適用同域、簡單靜態頁面；現代專案**強烈建議使用 `window.postMessage`**，支援跨域、安全性高、程式碼清晰、易於擴充雙向通訊。根據專案瀏覽器支援需求與域架構選擇適合方案。</div> <div class="qcxs_ie_he"></div> </div> <div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div> <div class="akevx_mj"> </div> <div class="qcxs_ie_he"></div> <ol class="qmsbvx_hsb ovv_hex"> <li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyjsp/47576.html' >JSP URL 傳遞中文參數編碼解碼最佳實踐</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyjsp/47578.html' >JSP 表單重置按鈕清空傳入資料實作 (jQuery 版)</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/' target="_blank">關於JSP</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162911.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011810342254.png' width='100' height='70' alt='JSP 第二課總結：語法詳解、指令大全、隱式對象與實戰練習' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162911.html' target="_blank"><strong>JSP 第二課總結：語法詳解、指令大全、隱式對象與實戰練習</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162911.html' target="_blank"><p>一、JSP 語法系統全景 1. 模板元素 JSP 中非 &</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/70815.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011109483917_S.gif' width='100' height='70' alt='Struts 2 入門完整 Demo：從專案建立到 Action 實作' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/70815.html' target="_blank"><strong>Struts 2 入門完整 Demo：從專案建立到 Action 實作</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/70815.html' target="_blank"><p>Struts 2 快速入門指南 Struts 2 是基於 M</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/231553.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201704/2017041714552371.gif' width='100' height='70' alt='JSP 前端資料本地排序實作：純 JavaScript 表格多欄位排序、箭頭切換、fmt 標籤格式化注意事項' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/231553.html' target="_blank"><strong>JSP 前端資料本地排序實作：純 JavaScript 表格多欄位排序、箭頭切換、fmt 標籤格式化注意事項</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/231553.html' target="_blank"><p>本文提供完整的前端表格排序 JavaScript 模組，支援</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/161906.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011809540998.png' width='100' height='70' alt='JSP 簡明教程（三）：九大隱含對象速查與常用方法表' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/161906.html' target="_blank"><strong>JSP 簡明教程（三）：九大隱含對象速查與常用方法表</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/161906.html' target="_blank"><p>JSP 簡明教程（三）：九大隱含對象速查與常用方法表 JSP</p></a> </div> <div class="qcxs_ie_he"></div> </div> </div> </div> <div class="eccsgxsg mt20"> <div class="akevx_oin"> </div> <div class="nenxnxb bg1 mt20"> <div class="enxvsfgg"> <div class="enxvsfgg_1"></div> </div> <div class="pdirbvx lbhevs ovv_hex"> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162278.html' target="_blank">XML 與 JSP 聯手開發（一）：架構選型與 XML vs 關聯式資料庫分析</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162126.html' target="_blank">JSP 與 XML 結合開發：自定義標籤庫完整指南</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/161833.html' target="_blank">JSP 中 request.getRealPath() 過時替代方案與最佳實踐</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/70857.html' target="_blank">JSP viewport 設定支援行動裝置縮放</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/163090.html' target="_blank">JSP 九大隱含對象詳解：request、session、application、pageContext 作用域與異常處理實戰</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/71125.html' target="_blank">Hibernate 通用 DAO 封裝：統一 CRUD、HQL/SQL 查詢與異常處理最佳實踐</a> <a href='https://code.yunyiwangluo.com/bianchen/gyjsp/162674.html' target="_blank">JavaScript 瀏覽器版本偵測：從 IE6/7 判斷談 User-Agent 解析的演進與最佳實踐</a> </div> </div> <div class="eqibneb bg1 mt20"> <div class="lkebxsg">欄目導航</div> <div class="eqibneb_1 ovv_hex"> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/jsprm/' target="_self">JSP 入門</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyjsp/' target="_self">關於JSP</a></li> </div> </div> </div> <div class="qcxs_ie_he"></div> </div> </div> <div class="qcxs_ie_he"></div> <div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved </div> </body> </html>
