谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要切换页面,或者被包含页面要做DOM动态操作,这时候,就需要程序去同步iframe高度和被包含页的实际高度了。
如果iframe的高度没有确定,那将是初始的高度。
iframe是网页中的一部分,其大小还要受到网页的限制,设置最高可以使用height=100%。
基本上解决iframe超出的高度都是增加了滚动条来实现的,很简单,如果你iframe中的信息超出了一屏幕,你就必须使用滚动条了。
开始用的时候还不行,后来发现是因为js跨域问题,没有权限。后来设置了window.document.domain 就可以了,用的是jquery代码2方法。
跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定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中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在www.a.com下,所以操作a.html时不受JavaScript的同源限制)
超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。
下面是其他两种方法:
iframe代码,注意要写ID
<iframe src=test.html id=main width=700 height=300 frameborder=0 scrolling=auto></iframe>
jquery代码1:
/注意:下面的代码是放在test.html调用
$(window.parent.document).find(#main).load(function(){
var main = $(window.parent.document).find(#main);
var thisheight = $(document).height()+30;
main.height(thisheight);
});
jquery代码2:
/注意:下面的代码是放在和iframe同一个页面调用
$(#main).load(function(){
var mainheight = $(this).contents().find(body).height()+30;
$(this).height(mainheight);
});
第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。
测试代码:
<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同一个页面调用,放在iframe下面
$(#mainframe).load(function () {
var mainheight = $(this).contents().find(body).height() + 30;
$(this).height(mainheight);
});
</script>



