首頁 >web前端 >js教程 >如何用JavaScript動態調整iFrame高度?

如何用JavaScript動態調整iFrame高度?

Patricia Arquette
Patricia Arquette原創
2024-12-31 01:32:09351瀏覽

How to Dynamically Adjust iFrame Height with JavaScript?

利用JavaScript 動態調整iFrame 高度

努力消除滾動條的需要並創建適應其內容的響應式iframe ,考慮採用以下解決方案方案:

Head部分修改:

引入以下腳本您網頁的部分:
<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

iFrame 修改:

修改您的iframe 程式碼,如下所示:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

此JavaScript函數檢索iframe 內容文檔的高度並相應地設定 iframe 的高度。當 iframe 首次載入或內容變更時,會觸發 resizeIframe 函數,確保 iframe 的高度始終與其內容同步。

以上是如何用JavaScript動態調整iFrame高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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