如何自動調整 iFrame 大小以適合其內容？

自動調整iFrame 大小以匹配內容

增強網頁的靈活性，調整iframe 的尺寸以適應其內容提供無縫體驗。讓我們探索解決這項挑戰的方法。

關鍵在於捕捉嵌入文件尺寸的變化。借助 JavaScript 的事件驅動特性，我們可以將事件偵聽器套用至文件並動態回應這些變更。具體來說，我們對 DOMContentLoaded 事件感興趣，該事件在文件內容完全載入時觸發。

現在，讓我們深入研究 JavaScript 程式碼：

function resizeIFrameToFitContent(iFrame) {
    iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

此函數採用 iframe作為其參數並更新其寬度和高度以匹配嵌入文檔正文的滾動寬度和高度。

要啟動此過程，我們在 DOMContentLoaded 事件中新增事件偵聽器：

window.addEventListener('DOMContentLoaded', function(e) {
    var iFrame = document.getElementById('iFrame1');
    resizeIFrameToFitContent(iFrame);
});

您可以自訂識別碼「iFrame1」以定位要調整的特定 iframe。或者，要調整頁面上所有iframe 的大小，請使用循環迭代它們：

var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent( iframes[i] );
}

此增強的程式碼允許自動調整頁面上的單個和所有iframe 的大小，確保它們的尺寸始終與他們的內容。

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