Javascript怎么使iframe自適應高度

這篇文章主要介紹“Javascript怎么使iframe自適應高度”，在日常操作中，相信很多人在Javascript怎么使iframe自適應高度問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Javascript怎么使iframe自適應高度”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

工作中我們遇到了iframe嵌入頁面高度自適應的問題。因為我們不知道所加載的iframe內容頁面會有多高，又不想在頁面上出現難看的滾動條，這個時候我們可以使用Javascript來動態讓iframe自適應高度。

準備工作

我們準備一個主頁面a.html，以及兩個用于嵌入iframe的頁面分別為iframeH.html和iframeH1.html，內容可以自己隨便加，實際應用中可能是后臺生成的內容。

為了演示，我們在主頁面a.html中加入如下代碼：

<p class="opt_btn"> <button onclick="getData('iframeH');">加載內容1</button> <button onclick="getData('iframeH2');">加載內容2</button> </p> <iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)"></iframe>

我們要實現的是，分別點擊兩個按鈕，iframe中加載不同的內容，iframe中不能出現滾動條。

Javascript

首先我們使用Javascript動態改變iframe的src值，即分別點擊兩個按鈕時，iframe加載不同的頁面內容。代碼中按鈕button分別調用了自定義函數getData()就實現了切換內容的效果。

function getData(ifm){ document.getElementById("ifrm").src = ifm+'.html'; }

然后，我們來關注iframe里的內容，因為我們事先不知道iframe的內容高度，如果先設置好iframe的高度height值，很可能當頁面內容超長時會出現滾動條，這不是我們想要的。那么我們使用Javascript來動態獲取iframe頁面高度，然后設置iframe的高度。

在iframe完全加載后即onload，調用setIframeHeight()，iframe內容加載完成后，可獲取iframe的高度值，然后重新設置iframe的高度，以下是整理好的代碼：

function setIframeHeight(id) {    var ifrm = document.getElementById(id);    var doc = ifrm.contentDocument? ifrm.contentDocument:        ifrm.contentWindow.document;    ifrm.style.visibility = 'hidden';    ifrm.style.height = "10px"; // reset to minimal height ...    ifrm.style.height = getDocHeight( doc ) + 4 + "px";    ifrm.style.visibility = 'visible'; } function getDocHeight(doc) {    doc = doc || document;    var body = doc.body, html = doc.documentElement;    var height = Math.max( body.scrollHeight, body.offsetHeight,        html.clientHeight, html.scrollHeight, html.offsetHeight );    return height; }

到此，關于“Javascript怎么使iframe自適應高度”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！