獲取iframe實際高度
阿新 • • 發佈：2018-12-10
要解決的問題：iframe初始高度太小。想根據頁面內容，自動撐開
HTML程式碼：
<iframe id="frame-content" scrolling="auto" src="你的網頁地址" frameborder="0"></iframe>
在iframe同頁面 => JS程式碼：
// iframe自適應會用到 function calcPageHeight(doc) { var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) var height = Math.max(cHeight, sHeight) return height } var ifr = document.getElementById('frame-content') ifr.onload = function () { var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow var height = calcPageHeight(iDoc); ifr.style.height = height + 'px' }
注：
1、在使用這種方法之前，需要注意一個跨域的問題，被iframe引入的頁面必須為同域頁面。不然會報錯
2、有時候本地除錯的時候，比如開啟的檔案在瀏覽器開頭為 file:// 瀏覽器也會預設為跨域頁面，這時候只需要自己搭建一個伺服器環境（phpstudy之類的都可以）。就可以了
3、有時候可能需要改變iframe的內容，比如iframe中引入的A頁面，高度為1000px、而B頁面高度只有500px、這時候切換的時候，B頁面即使重新計算了高度，也不會生效，預設繼承了A頁面的1000px、所以在切換頁面的時候，最好就是手動設定一下iframe的高度，在進行計算。
**THE END**