謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個(gè)iframe。如果iframe始終調(diào)用同一個(gè)固定高度的頁面，我們直接寫死iframe高度就可以了。而如果iframe要切換頁面，或者被包含頁面要做DOM動(dòng)態(tài)操作，這時(shí)候，就需要程序去同步iframe高度和被包含頁的實(shí)際高度了。
如果iframe的高度沒有確定，那將是初始的高度。
iframe是網(wǎng)頁中的一部分，其大小還要受到網(wǎng)頁的限制，設(shè)置最高可以使用height="100%"。
基本上解決iframe超出的高度都是增加了滾動(dòng)條來實(shí)現(xiàn)的，很簡單，如果你iframe中的信息超出了一屏幕，你就必須使用滾動(dòng)條了。
開始用的時(shí)候還不行，后來發(fā)現(xiàn)是因?yàn)閖s跨域問題，沒有權(quán)限。后來設(shè)置了window.document.domain 就可以了，用的是jquery代碼２方法。
跨域下的iframe自適應(yīng)高度
跨域的時(shí)候，由于js的同源策略，父頁面內(nèi)的js不能獲取到iframe頁面的高度。需要一個(gè)頁面來做代理。
方法如下：假設(shè)www.a.com下的一個(gè)頁面a.html要包含www.b.com下的一個(gè)頁面c.html。
我們使用www.a.com下的另一個(gè)頁面agent.html來做代理，通過它獲取iframe頁面的高度，并設(shè)定iframe元素的高度。
a.html中包含iframe:
<iframe src="http://www.b.com/c.html" id="Iframe" frameborder="0" scrolling="no" style="border:0px;"></iframe>
在c.html中加入如下代碼：
<iframe id="c_iframe" height="0" width="0" src="http://www.a.com/agent.html" style="display:none" ></iframe>
<script type="text/javascript">
(function autoHeight(){
var b_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight);
var c_iframe = document.getElementById("c_iframe");
c_iframe.src = c_iframe.src+"#"+b_width+"|"+b_height;
})();
</script>
最后，agent.html中放入一段js:
<script type="text/javascript">
var b_iframe = window.parent.parent.document.getElementById("Iframe");
var hash_url = window.location.hash;
if(hash_url.indexOf("#")>=0){
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
}
</script>
agent.html從URL中獲得寬度值和高度值，并設(shè)置iframe的高度和寬度（因?yàn)閍gent.html在www.a.com下，所以操作a.html時(shí)不受JavaScript的同源限制）
超級(jí)簡單的方法，也不用寫什么判斷瀏覽器高度、寬度啥的。
下面的兩種方法自選其一就行了。一個(gè)是放在和iframe同頁面的，一個(gè)是放在test.html頁面的。
注意別放錯(cuò)地方了哦。
下面是其他兩種方法：
iframe代碼，注意要寫ID
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
jquery代碼１：
//注意：下面的代碼是放在test.html調(diào)用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代碼２：
//注意：下面的代碼是放在和iframe同一個(gè)頁面調(diào)用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});
第二種有效，不過要注意一點(diǎn)是，增加的JS要寫在iframe下面，放在頭部是測(cè)試沒有效果。
測(cè)試代碼：
<iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist" frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
<script type="text/javascript">
//注意：下面的代碼是放在和iframe同一個(gè)頁面調(diào)用,放在iframe下面
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});
</script>
喜歡 
頂
難過
囧
圍觀
無聊
