標題描述

一、解決方法	解決代碼
二、關于高度問題	簡單講一下jquery中的 height()，innerHeight()、outHeight()， js中的offsetHeight、clientHeight、scrollHeight。 如何獲取沒有給出高度的元素的高度？ 詳細介紹offsetHeight,clientHeight,scrollHeight之間的區別
三、試驗歷程	例舉了一下我寫這個遇到的坑，以及怎么得出最后的方案。

一、解決方法

因為我這是 寬度已知，整體居中的布局，滾動條加在 iframe 標簽上會很奇怪，而且iframe的高度不確定，所以滾動條只能加給父級body上。

//自動計算Iframe的高度 (function(){//根據ID獲取iframe對象var ifr = document.getElementById('iframe-box'); ifr.onload = function() { //DOM0級事件，沒有兼容var timer = setTimeout(function(){clearTimeout(timer);//解決打開高度太高的頁面后再打開高度較小頁面滾動條不收縮ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;var height = Math.max(calcPageHeight(iDoc));ifr.style.height = height + "px";},200) }// 計算頁面的實際高度，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;} })();

注意：
（1）iframe 是雙標簽，需要結尾：<iframe></iframe>
（2）iframe 標簽中的 scrolling 要為 “no”，禁止 iframe 的滾動條；
（3）記得使用延時器，因為 iframe 中有異步操作，iframe中的DOM結構和資源加載完成，可能異步還沒有執行完，所以用延時器改變一下加載 iframe 子元素高度的順序。
（4）如果需要對同 iframe 做相同事件，但是邏輯不同的操作，使用事件監聽。

//事件監聽的封裝函數---通過事件監聽寫的邏輯操作也稱 DOM2級事件。DOM2級事件存在兼容問題 function addEvent(ele,type,callback){ if(ele.addEventListener){ ele.addEventListener(type,callback,false); } else if(ele.attachEvent){ ele.attachEvent("on"+type,callback); } else { ele["on"+type] = callback; } } //使用 addEvent(obox,"click",function(){ console.log(1); })

（5）有時候本地調試的時候，比如打開的文件在瀏覽器開頭為 file:// 瀏覽器也會默認為跨域頁面，這時候只需要自己搭建一個服務器環境（phpnow之類的都可以），就可以了；
（5）jquery 寫 onload 事件的寫法：

$("#iframe").load(function(){//... })

（6）可參考資料：iframe 動態onload事件處理方式
（7）其他：圖片onload事件詳解，兼容所有瀏覽器！

---

二、關于高度

如何獲取沒有給出高度的元素的高度？

alert($(window).height()); //瀏覽器當前窗口可視區域高度 alert($(document).height()); //瀏覽器當前窗口文檔的高度 alert($(document.body).height());//瀏覽器當前窗口文檔body的高度 alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin alert($(window).width()); //瀏覽器當前窗口可視區域寬度 alert($(document).width());//瀏覽器當前窗口文檔對象寬度 alert($(document.body).width());//瀏覽器當前窗口文檔body的高度 alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin

---

三、試驗歷程

1. 參考 怎么讓iframe的高度和寬度可以100%

<iframe name="right" id="center_cent" src="center/center0.html" width="100%" frameborder="0" onload='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px"; '> </iframe>

這里 onload 中寫的是 this.style.height，有的是直接寫this.height，二者的區別是，前面是給 iframe 添加 css 樣式，把 height 作為 css 中的屬性。后者是把 height 當做 iframe 標簽 中的內置可見屬性，

一開始參考這里面的代碼，發現有個問題：
當iframe 中有異步操作時，高度獲取有時候不準確，不是子頁面的實際高度；當網速較慢時，高度幾乎都能計算出并獲取子頁面的高度。

2. 參考iframe嵌套界面自適應，可高度自由收縮

之后參考了這個博主的文章，但是還是會碰到上面的問題，只是會給頁面一個固定高度，當我子頁面的高度>這個固定高度時，子頁面多出的部分會被隱藏掉。

<script>// 計算頁面的實際高度，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}//根據ID獲取iframe對象var ifr = document.getElementById('iframe-box');ifr.onload = function() {//解決打開高度太高的頁面后再打開高度較小頁面滾動條不收縮ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.documentvar height = calcPageHeight(iDoc)if(height < 850){height = 850;}ifr.style.height = height + 'px'} </script>

3. 解決首次彈出層iframe框架時，iframe框架所調用的頁面高度和寬度取不到的問題

然后發現了這篇文章，上面問題導致的原因，可能是獲取高度和iframe加載的順序上面不對，通用延時函數setTimeout來調整執行順序即可解決。

$(function () {setTimeout(function () {//在這里就可以獲取到頁面元素高度}, 0); });

總結

以上是生活随笔為你收集整理的iframe 高度根据子页面来确定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。