iframe 根据内容自适应高度-终极解决方案

第一中方法:

在子页面加载完毕的时候执行

parent.document.getElementById("iframe").height=0;

parent.document.getElementById("iframe").height=document.body.scrollHeight;


第二中方法:

在主页面 iframe onLoad 时间里面写

function iframeLoad()
{
    document.getElementById("iframe").height=0;
    document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
}


 
 

推荐第二种

  • 45
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
根据引用\[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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值