几个办法,一是在iframe onload的时候计算并设置iframe高度,另一个是定期运行js函数来检查并设置iframe高度,有篇文章不错(>
1、可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:
// documentdomain = "caibaojiancom";function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframecontentWindow || iframecontentDocumentparentWindow;
if (iframeWindocumentbody) {
iframeheight = iframeWindocumentdocumentElementscrollHeight || iframeWindocumentbodyscrollHeight;
}
}
};
windowonload = function () {
setIframeHeight(documentgetElementById('external-frame'));
};
(如果在同个顶级域名下,不同子域名之间互通信息,设置documentdomain="域名com"
2、只要修改以上的iframe的ID即可了。或者你可以直接在iframe里面写代码,我们一般为了不污染HTML代码,建议使用上面的代码。
<iframe src="backtophtml" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>3、多个iframe的情况下
<script language="javascript">//输入你希望根据页面高度自动调整高度的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<iframeidslength; i++)
{
if (documentgetElementById)
{
//自动调整iframe高度
dyniframe[dyniframelength] = documentgetElementById(iframeids[i]);
if (dyniframe[i] && !windowopera)
{
dyniframe[i]styledisplay="block";
if (dyniframe[i]contentDocument && dyniframe[i]contentDocumentbodyoffsetHeight) //如果用户的浏览器是NetScape
dyniframe[i]height = dyniframe[i]contentDocumentbodyoffsetHeight;
else if (dyniframe[i]Document && dyniframe[i]DocumentbodyscrollHeight) //如果用户的浏览器是IE
dyniframe[i]height = dyniframe[i]DocumentbodyscrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((documentall || documentgetElementById) && iframehide=="no")
{
var tempobj=documentall documentall[iframeids[i]] : documentgetElementById(iframeids[i]);
tempobjstyledisplay="block";
}
}
}
if (windowaddEventListener)
windowaddEventListener("load", dyniframesize, false);
else if (windowattachEvent)
windowattachEvent("onload", dyniframesize);
else
windowonload=dyniframesize;
</script>
4、打开调试运行窗口可以看到运行。·
跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下:假设>
ahtml中包含iframe:
<iframe src=";5、在chtml中加入如下代码:
<iframe id="c_iframe" height="0" width="0" src=";6、最后,agenthtml中放入一段js:
<script type="text/javascript">var b_iframe = windowparentparentdocumentgetElementById("Iframe");
var hash_url = windowlocationhash;
if(hash_urlindexOf("#")>=0){
var hash_width = hash_urlsplit("#")[1]split("|")[0]+"px";
var hash_height = hash_urlsplit("#")[1]split("|")[1]+"px";
b_iframestylewidth = hash_width;
b_iframestyleheight = hash_height;
}
</script>
agenthtml从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agenthtml在>
//windowonresize表示窗口触发时间的时候执行
//两个函数,用闭包包裹起来()()
windowonload=function(){
(windowonresize=function(){
//获取可见宽度
var width=documentdocumentElementclientWidth-180;//180为左边的div的大小
//获取可见高度
var height=documentdocumentElementclientHeight-80;//80为头部的div的大小可自己修改
//如果有宽度就给值,
if(width>=0){
documentgetElementById('main')stylewidth=width+'px';
}
if(height>=0){
documentgetElementById('sidebar')styleheight=height+'px';
documentgetElementById('main')styleheight=height+'px';
}
})()};
扩展资料:
//设置iframe的高度
function resizeFrameHeight() {
$('tab_iframe')css('height', documentdocumentElementclientHeight - 118);
$('md-tab-content')css('left', '0');
}
windowonresize = function () {
resizeFrameHeight();
initScrollShow();
initScrollState();
}
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。 // iframe自动适应页面 // //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔 例如: ["myfram
以上就是关于Iframe的代码怎么写才能满足我的自适应内容的高度的要求啊全部的内容,包括:Iframe的代码怎么写才能满足我的自适应内容的高度的要求啊、HTML的frame框架怎么自适应高度、iframe在div中如何自适应高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)