iframe 自适应高度(iframe自适应高度张旭鑫)

iframe框架高度如何自适应！

<iframe
scrolling="no"
name="aa"
frameborder="0"
src="bb.html"
onload="this.height=0;var
fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offtHeight);this.height=(fdh>700?fdh:700)"></iframe>
iframe高度自适应，700为自己设定的iframe高度最低值，高度小于700的将以700显示，大于700将以div自身高度来显示。iframe高度最低值可以自己修改

怎么让iframe的高度自适应

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

HTML的frame框架怎么自适应高度？

HTML的frame框架自适应高度的6个方法:

1、可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。常用的兼容代码有：

//document.domain="caibaojian.com";
functiontIframeHeight(iframe){
if(iframe){
variframeWin=iframe.contentWindow||iframe.contentDocument.parentWindow;
if(iframeWin.document.body){
iframe.height=iframeWin.document.documentElement.scrollHeight||iframeWin.document.body.scrollHeight;
}
}
};

window.onload=function(){
tIframeHeight(document.getElementById('external-frame'));
};

（如果在同个顶级域名下，不同子域名之间互通信息，设置document.domain="域名.com"

2、只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码，我们一般为了不污染HTML代码，建议使用上面的代码。

<iframesrc="backtop.html"frameborder="0"scrolling="no"id="external-frame"onload="tIframeHeight(this)"></iframe>

3、多个iframe的情况下

<scriptlanguage="javascript">
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔.例如:["myframe1","myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
variframeids=["test"];
//如果用户的浏览器不支持iframe是否将iframe隐藏yes表示隐藏，no表示不隐藏
variframehide="yes";
functiondyniframesize()
{
vardyniframe=newArray()
for(i=0;i<iframeids.length;i++)
{
if(document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length]=document.getElementById(iframeids[i]);
if(dyniframe[i]&&!window.opera)
{
dyniframe[i].style.display="block";
if(dyniframe[i].contentDocument&&dyniframe[i].contentDocument.body.offtHeight)//如果用户的浏览器是NetScape
dyniframe[i].height=dyniframe[i].contentDocument.body.offtHeight;
elif(dyniframe[i].Document&&dyniframe[i].Document.body.scrollHeight)//如果用户的浏览器是IE
dyniframe[i].height=dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if((document.all||document.getElementById)&&iframehide=="no")
{
vartempobj=document.all?document.all[iframeids[i]]:document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if(window.addEventListener)
window.addEventListener("load",dyniframesize,fal);
elif(window.attachEvent)
window.attachEvent("onload",dyniframesize);
el
window.onload=dyniframesize;
</script>

4、打开调试运行窗口可以看到运行。·

跨域下的iframe自适应高度

跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。

a.html中包含iframe:

<iframesrc="http://www.b.com/c.html"id="Iframe"frameborder="0"scrolling="no"style="border:0px;"></iframe>

5、在c.html中加入如下代码：

<iframeid="c_iframe"height="0"width="0"src="http://www.a.com/agent.html"style="display:none"></iframe>
<scripttype="text/javascript">
(functionautoHeight(){
varb_width=Math.max(document.body.scrollWidth,document.body.clientWidth);
varb_height=Math.max(document.body.scrollHeight,document.body.clientHeight);
varc_iframe=document.getElementById("c_iframe");
c_iframe.src=c_iframe.src+"#"+b_width+"|"+b_height;//这里通过hash传递b.htm的宽高
})();
</script>

6、最后，agent.html中放入一段js:

<scripttype="text/javascript">
varb_iframe=window.parent.parent.document.getElementById("Iframe");
varhash_url=window.location.hash;
if(hash_url.indexOf("#")>=0){
varhash_width=hash_url.split("#")[1].split("|")[0]+"px";
varhash_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的同源限制）

Safari浏览器下怎么实现iframe高度自适应

实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offtHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offtHeight;
el if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, fal)
el if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
el
window.onload=dyniframesize
</script>

什么命令可以使iframe框架里的被引用页面宽高自适应框架宽高？

并不是里页面高度自适是，而是外面的iframe高度自适应你引入的页面的高度。思路是js控制iframe自适应高度，因为iframe本身并不能自适应高度，只有写死高度才行，所以要用js判断整个页面内容的高度。
给你的代码:
<iframe allowtransparency="true" src="你要入引的页面.htm" id="defaulIframePage" name="defaulIframePage" frameborder="0" scrolling="no" width="100%" onload="defaulIframePageHeight()">

</iframe>

js部分:
function defaulIframePageHeight()

{
var ifm = document.getElementById("defaulIframePage");
var subWeb = document.frames ? document.frames["defaulIframePage"].document : ifm.contentDocument;
if (ifm != null && subWeb != null)

{
ifm.height = subWeb.body.scrollHeight;
}
}