很多朋友对iframe嵌套页面高度自适应，iframe 自适应高度还不了解，今天小绿就为大家解答一下。
iframe 自适应高度如果我们总是用固定的高度调用同一个页面，那么直接写iframe高度就可以了。如果iframe必须切换页面，或者所包含的页面必须进行DOM动态操作，那么程序需要将iframe的高度与所包含页面的实际高度同步。
如果iframe的高度没有确定，它将是初始高度。
Iframe是网页的一部分，它的大小受到网页的限制。最高设置可以是高度=“100%”。
基本上iframe超高的问题是通过添加滚动条来解决的。这很简单。如果iframe中的信息超过一个屏幕，则必须使用滚动条。
一开始不行，后来发现js因为跨域问题，没有权限。后来设置了window.document.domain，使用了jquery code 2方法。
iframe跨域的自适应高度
跨域时，由于js的同源策略，父页面中的js无法获得iframe页面的高度。需要一个页面作为代理。
方法如下：假设a.html www.a.com下的一个页面包含c.html www.b.com下的一个页面。
我们使用agent.html www.a.com下的另一个页面作为代理，获取iframe页面的高度并设置iframe元素的高度。
a.html包含iframe:
Iframe src=' http://www . b . com/c . html ' id=' Iframe ' frame border=' 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 '(函数autoHeight(){ var b _ width=math . max(document . body . scroll width，document . body . client width)；var b _ height=math . max(document . body . scroll height，document . body . client height)；var c _ iframe=document . getelementbyid(' c _ iframe ')；c _ iframe . src=c _ iframe . src ' # ' b _ width ' | ' b _ height；})();/脚本
最后，将一个js放入agent.html:
script type=' text/JavaScript ' var b _ Iframe=window . parent . parent . document . getelementbyid(' Iframe ')；var hash _ URL=window . location . hash；if(hash _ URL . index of(' # ')=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；}/脚本
从agent.html URL获取宽度值和高度值，设置iframe的高度和宽度(因为agent.html在www.a.com，所以操作a.html时不受JavaScript同源的限制)
超级简单的方法，而且不用写什么就能判断出浏览器的高度和宽度。
下面两种方法选一个就行了。一个和iframe在同一个页面，另一个在test.html页面。
小心不要放错地方。
下面是另外两种方法：
Iframe代码，小心写ID
Jquery代码1:
//注意：以下代码是在test.html调用的。
$(window.parent.document)。查找(' #main ')。load(function(){
var main=$(window . parent . document)。find(' # main ')；
var thisheight=$(文档)。身高()30；
main . height(this height)；
});
Jquery代码2:
//注意：下面的代码是在与iframe相同的页面上调用的。
$('#main ')。load(function(){
var mainheight=$(this)。内容()。查找(' body ')。身高()30；
$(这个)。高度(main height)；
});
第二个是有效的，但是要注意，添加的JS要写在iframe下面，放在头上测试没有效果。
测试代码：
以上问题已解答完毕，如果想要了解更多内容，请关注本站