展会信息港展会大全

iframe自适应高度方法
来源:互联网   发布日期:2016-01-26 10:57:50   浏览:1757次  

导读:谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个 iframe。如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。而如果iframe要 ...

谓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>

赞助本站

人工智能实验室

相关热词: 自适应高度 iframe

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港