首頁  >  文章  >  後端開發  >  如何動態調整 Iframe 的大小以適應其內容?

如何動態調整 Iframe 的大小以適應其內容?

Barbara Streisand
Barbara Streisand原創
2024-10-26 19:44:02367瀏覽

How Can I Dynamically Resize an Iframe to Fit Its Content?

根據內容動態調整iframe 高度

問題:

在網站中合併iframe,目標是動態確定iframe適當高度。理想情況下,iframe 應適應其顯示的內容,無需滾動條,類似於網站內的無縫整合。

答案:

最初嘗試 JavaScript 計算高度時,拒絕存取權限阻礙了進度。隨後,考慮使用 Ajax 或 PHP。

但是,解決方案在於利用 window.onload 中 iframe 頁面的觸發器將正文高度傳達給父親頁面。然後,父級會相應地調整 iframe 高度。

<code class="html"><body onload='parent.resizeIframe(document.body.scrollHeight)'></code>
<code class="javascript">function resizeIframe(newHeight)
{
    document.getElementById('blogIframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}</code>

雖然 iframe 最初可能以預設高度顯示,但可以透過最初顯示載入影像並隱藏 iframe 來緩解這種情況。一旦 resizeIframe 函數收到高度更新,它可以刪除載入圖像並顯示 iframe,模擬類似 Ajax 的體驗。

或者,如果出現跨域限制,代理 PHP 腳本可以促進嵌入。然而,為了最大限度地控制和易於實施,透過 PHP 直接嵌入部落格的 RSS feed 提供了一個可行的解決方案。

以上是如何動態調整 Iframe 的大小以適應其內容?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn