咱們先看一個示例,有兩個頁面,1.html經過iframe嵌入2.html,兩個頁面都是同域的javascript
1.htmlhtml
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>1.html</title> </head> <body> <iframe id="ifr" src="2.html" frameborder="0" width="100%"></iframe> </body> </html>
2.html,不少P元素將高度撐高一些java
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.html</title> </head> <body> <p>這是一個ifrmae,嵌入在http://snandy.github.io/lib/iframe/1.html裏 </p> <p>根據自身內容調整高度</p> <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p> </body> </html>
此時,瀏覽器訪問1.html,效果如圖git
能夠看到,嵌入的iframe出現了滾動條,需求是不想出現滾動條,頁面多高就顯示多少。咱們不能隨便給iframe設個高度,由於你不知道嵌入的iframe會有多高(內容是動態生成的)。github
解決方法其實很簡單,無非是給1.html裏的iframe設個高度,高度的值即爲2.html的內容高度。要注意的是2.html的內容高度須要頁面徹底載入(onload)後獲取。瀏覽器
有兩種方式 函數
A. JS代碼寫在父頁面,即父頁面(1.html)裏獲取子頁面(2.html)文檔對象,當iframe載入後(load)獲取高度,將此高度值賦值給iframe標籤測試
開始測試時使用iframe的contentWindow的load事件,但全部瀏覽器均不執行。最後使用iframe的load事件,在父頁面1.html底部加入以下JS代碼spa
<script type="text/javascript"> // 計算頁面的實際高度,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('ifr') ifr.onload = function() { var iDoc = ifr.contentDocument || ifr.document var height = calcPageHeight(iDoc) ifr.style.height = height + 'px' } </script>
這裏有兩個細節:htm
1. 取iframe內的文檔對象,標準瀏覽器使用contentDocument屬性,IE低版本(IE6,7,8)使用document屬性。
2. calcPageHeight函數計算頁面的實際高度,標準瀏覽器使用document.documentElement,低版本IE使用document.body,默認取clientHeight,出現滾動條的取scrollHeight,最後取兩個值中最大的。
B. JS代碼寫在子頁面,即子頁面在window load後計算高度,將此高度值賦值給父頁面的iframe
在子頁面(2.html)底部加入以下代碼
<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 } window.onload = function() { var height = calcPageHeight(document) parent.document.getElementById('ifr').style.height = height + 'px' } </script>
經過這兩種方式均可以實現iframe的高度自適應,能夠看到從新設置iframe的高度後,其滾動條都去掉了。
線上示例:http://snandy.github.io/lib/iframe/1.html
相關:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-78799536
http://msdn.microsoft.com/en-us/library/ie/cc196985(v=vs.85).aspx