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

如何根據內容動態調整iframe高度

當iframe內容超出高度限制的場景下，動態調整是很有必要的它的大小可以容納多餘的內容。這可以使用 JavaScript 和 JQuery 的組合來實現。

要檢索iframe 內容的高度，請使用以下程式碼：

contentWindow.document.body.scrollHeight

載入iframe 後，動態調整其大小使用：

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    // Delete and recreate the height to ensure proper resizing
    iFrameID.height = "";
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

在iframe 中包含「onload」事件處理程序標籤：

<iframe>

要在iframe 內提交表單後處理動態調整大小，請在iframe 的內容腳本中包含以下程式碼：

parent.iframeLoaded();

此方法可確保調整iframe 的高度動態地適應所有內容，消除了捲軸的需要，並在不同的瀏覽器中保持流暢的使用者體驗。

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