Iframe根据src页面高度实时调整高度

function getDocHeight(doc)
{
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中,doc.height就可以了

var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight,包含了边框的高度

if (doc.height)
{
//Firefox支持此属性,IE不支持
docHei = doc.height;
}
else if (doc.body)
{
//在IE中,只有body.scrollHeight是与当前页面的高度一致的,
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement)
{
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!
*/
return docHei;
}
function doReSize()
{
var iframeWin = window.frames['iframe_body'];
var iframeEl = window.document.getElementById? window.document.getElementById('iframe_body'): document.all? document.all['iframe_body']: null;
if ( iframeEl && iframeWin )
{
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl)
{
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}

function runResizeTask()
{
doReSize();
setTimeout("runResizeTask()",500);//每隔半秒执行一次
}


<iframe allowtransparency='true' style="background-color: #DCE0E4; margin: 0px 0px; " id="iframe_body" height="100%" width="100%" src="aaa.action" framespacing="0" frameborder="no" scrolling="No" border="0" οnlοad="runResizeTask();" >
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用\[1\]和引用\[2\]的内容,你可以使用JavaScript来实现iframe标签的自适应高度。在父页面中,你可以使用以下代码来设置iframe高度: ```javascript function setIframeHeight(iframe) { if (iframe) { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; if (iframeWin.document.body) { iframe.height = iframeWin.document.body.scrollHeight; } } } window.onload = function() { setIframeHeight(document.getElementById('contIframs')); }; ``` 这段代码会在页面加载完成后自动调用`setIframeHeight`函数,将iframe高度设置为其内部内容的高度。在子页面中,你可以使用以下代码来实现当页面内容高度变化时,重新设置父页面iframe高度: ```javascript var bodyH = $('body').height(); $('#contIframs', parent.document).height(bodyH); ``` 这段代码会获取页面的body高度,并将其赋值给父页面中的iframe,从而实现高度的自适应。另外,你还可以使用jQuery的`load()`方法来加载页面内容,从而实现自动撑开页面的效果。例如: ```javascript function loadPage(path) { $('#contIframs').load(path); } loadPage('xin_xi.html'); ``` 这段代码会加载`xin_xi.html`页面,并自动调整iframe高度以适应页面内容的变化。 另外,根据引用\[3\]的内容,你还可以在子页面中使用以下代码来实现iframe高度自适应: ```html <!DOCTYPE html> <html> <head> <title>iframe宽度高度自适应</title> </head> <body id="body" height="100%"> <script type="text/javascript"> document.getElementsByTagName('body')\[0\].style.height = window.innerHeight + 'px'; </script> <iframe name="Info1" id="Info1" src="http://www.baidu.com" onload="this.height=body.offsetHeight" width="100%" scrolling="true" frameborder="0"></iframe> </body> </html> ``` 这段代码会将iframe高度设置为父元素(这里是body)的高度,从而实现高度的自适应。 综上所述,你可以根据以上的方法来实现iframe标签外盒子高度根据里面的iframe内容自适应高度。 #### 引用[.reference_title] - *1* [动态修改iframe高度,从而自适应内容真实高度](https://blog.csdn.net/entouger/article/details/120180403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [使用iframe标签时页面内容可以自适应](https://blog.csdn.net/weixin_43822182/article/details/88668033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [iframe高度宽度自适应](https://blog.csdn.net/super__dreamer/article/details/52468942)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值