iframe 自适应高度,更改内容时iframe高度怎么根据新的内容高度自动改变

//code from http://caibaojian.com/iframe-adjust-content-height.html
<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" οnlοad="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){

var iframe = document.getElementById("test");

iframe.height = 0; //只有先设置原来的iframe高度为0,之前的iframe高度才不会对现在的设置有影响
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>


  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
根据引用\[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 ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值