您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

HTML 頁面無法滾動數據顯示不全：iframe/frame 高度自適應或分頁解決

編輯：程式設計疑難解答

問題

框架頁面循環獲取大量數據，頁面顯示不全，瀏覽器無滾動條。

原因分析

``/`<frame>` 默認高度不隨內容撐開，父頁面無滾動條（`overflow:hidden` 或未設高度）。</li> <li>數據量大時，單頁渲染所有行導致 DOM 節點過多、佈局計算慢、內存佔用高。</li> </ul> <h2>解決方案</h2> <ol> <li><strong>iframe 自適應高度</strong>（同域）： <pre><code><iframe id="frm" src="list.jsp" style="width:100%; border:none;" scrolling="auto"></iframe> <script> // 父頁面監聽 iframe onload，動態調高 document.getElementById('frm').onload = function() { this.style.height = this.contentWindow.document.body.scrollHeight + 'px'; }; </script></code></pre> 需同域策略允許訪問 `contentWindow`。</li> <li><strong>父頁面直接滾動</strong>：iframe 設 `height:100vh`，父頁面 `overflow:auto`，滾動條在父頁面。</li> <li><strong>分頁/虛擬滾動（推薦）</strong>：後端分頁返回 JSON，前端用表格組件（DataTables、AG Grid、Vue/React Table）實現分頁或虛擬滾動，**只渲染可視區 DOM**，性能最優。</li> </ol> <h2>技術選型建議</h2> <table border="1" cellpadding="4"> <tr><th>方案</th><th>適用場景</th><th>優點</th><th>缺點</th></tr> <tr><td>iframe 自適應</th><td>嵌入第三方/舊系統頁面</th><td>隔離樣式/腳本</th><td>跨域受限、SEO 差、滾動體驗差</td></tr> <tr><td>父頁面滾動</th><td>簡單內嵌</th><td>實現簡單</th><td>大數據卡頓</td></tr> <tr><td>前端分頁/虛擬滾動</th><td>大數據列表、現代 SPA</th><td>性能最好、體驗佳</th><td>需重構為 AJAX+組件</td></tr> </table> <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/bcdq/26261.html' >Android Toast 名稱由來：從「烤麵包機彈出」到輕量級提示</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/bcdq/26263.html' >Java 網絡編程：同一無線網下兩電腦 IP 衝突解決</a> </ol> </div> </div> <div class="qirnxbd bg1 mt20"> <div class="jdbsbav"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_blank">程式設計疑難解答</a> <div class="jdbsbav_hx"></div> </div> <div class="qirnxbd_rbx"> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25561.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010519570848.png' width='100' height='70' alt='MyEclipse JSP 連接 MySQL 讀取正常但寫入失效排查' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25561.html' target="_blank"><strong>MyEclipse JSP 連接 MySQL 讀取正常但寫入失效排查</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25561.html' target="_blank"><p>現象登錄讀取數據正常，註冊寫入 `INSERT` 執行無異</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26553.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010520375749.png' width='100' height='70' alt='MySQL 刪除報錯「Unknown column aaa 」？字符串值必須加引號！' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26553.html' target="_blank"><strong>MySQL 刪除報錯「Unknown column 'aaa'」？字符串值必須加引號！</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26553.html' target="_blank"><p>錯誤現場表 sicence_fiction_film，欲刪</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24330.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010518272412.png' width='100' height='70' alt='Android TextView setTextSize 調用失敗？原來是缺了大括號！' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24330.html' target="_blank"><strong>Android TextView setTextSize 調用失敗？原來是缺了大括號！</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24330.html' target="_blank"><p>現象描述在 Android Studio / AIDE 中</p></a> </div> <div class="oiendx"> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26440.html' target="_blank"><img src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010520335555.png' width='100' height='70' alt='MySQL 命令行創建用戶與授權完整指南：從安裝到遠程訪問配置' border='0'></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26440.html' target="_blank"><strong>MySQL 命令行創建用戶與授權完整指南：從安裝到遠程訪問配置</strong></a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26440.html' target="_blank"><p>場景剛安裝 MySQL，需在命令行創建用戶 `hr`、密碼</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/bcdq/25150.html' target="_blank">IC 卡資料分析常用工具：卡匠好 AOS 與 VCCC</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24447.html' target="_blank">JVM 啟動流程與 .bat 腳本關係：關閉 CMD 視窗不影響 Java 程式運行</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/25181.html' target="_blank">C 語言線性表插入刪除完整修正版：語法錯誤、缺失函數與邏輯修復</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/39827.html' target="_blank">C 語言指針實現數組最大值與次大值查找</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/23642.html' target="_blank">C++ 三元運算符 count % 2 ? "****" : "++++++++" 解析</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/26039.html' target="_blank">Android Studio 離線開發完全指南：打破「必須聯網」誤區</a> <a href='https://code.yunyiwangluo.com/bianchen/bcdq/24624.html' target="_blank">Qt5 QPixmap 載入 JPG/TIFF 失敗：缺少圖片格式插件部署指南</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/huibian/' target="_self">組合語言</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/delphi/' target="_self">Delphi</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/groovy/' target="_self">Groovy</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/webSphere/' target="_self">WebSphere</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/rational/' target="_self">Rational</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/python/' target="_self">Python 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/ruby/' target="_self">Ruby 程式設計</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcdq/' target="_self">程式設計疑難解答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bczhwd/' target="_self">程式設計綜合問答</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gdgybc/' target="_self">更多程式設計知識</a></li> <li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/bcwtjd/' target="_self">程式設計問題解答</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>