如何在沒有 Ajax 或 PHP 的情況下動態調整 Iframe 的大小？
- Linda Hamilton原創
- 2024-10-27 02:10:02777瀏覽
動態iframe 大小調整：克服高度限制
在iframe 中嵌入外部內容時，動態調整條高度以消除不必要的滾動條高度以消除不必要的滾動條高度以消除不必要的滾動條高度至關重要。為了避免可訪問性問題並保持無縫的單頁體驗，我們將探索 Ajax 或 PHP 以外的選項。
解決方案：使用 JavaScript 進行跨域通訊
不幸的是由於跨域限制，Ajax 和 PHP 在這種情況下就顯得力不從心了。相反，我們將使用 JavaScript 來啟動 iframe 內容和父頁面之間的跨域互動。
第1 步：從Iframed 頁面觸發高度計算
-
將此程式碼插入iframe 的正文中：
<body onload='parent.resizeIframe(document.body.scrollHeight)'>
第2 步：父頁中的調整大小功能
-
在父頁的JavaScript 中，定義一個函數來調整iframe的高度：
function resizeIframe(newHeight) { document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px'; }
處理初始高度和加載
- 最初，iframe 將具有預設高度。
- 新增一個首先可見的載入映像，並在 resizeIframe 函數執行時將其隱藏。
- 這會產生以下錯覺：動態調整大小。
限制和注意事項
解決方案在同一域中運作。對於跨域嵌入，請考慮使用 PHP 代理程式腳本或直接嵌入部落格的 RSS feed。以上是如何在沒有 Ajax 或 PHP 的情況下動態調整 Iframe 的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn