父页面iframe自适应子页面高度-优快云博客

本文介绍了一种在网页中根据子页面内容动态调整iframe高度的方法。当iframe内容加载时，通过子页面中的JavaScript函数获取其实际的高度和宽度，并将这些值应用到父页面的iframe上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　父页面有table，有tr，td。td中有iframe。页面加载时未设定iframe的src，tr的style设置为none。
　　
　　
　　
　　
　　
　　通过某事件，需要tr显示。iframe有内容
　　if(document.getElementById("tr_clueReportENIframe" ).style.display=="none"){
　　document.getElementById("tr_clueReportENIframe").s tyle.display="";
　　document.getElementById("clueReportENIframe").src= "displayClueReport.do?clueReportRecordId ="+ clueReportRecordId +"&language=EN";
　　}
　　else if(document.getElementById("tr_clueReportENIframe" ).style.display==""){
　　document.getElementById("tr_clueReportENIframe").s tyle.display="none";
　　}
　　iframe的src指向action。action跳转到子页面a.jsp页面，jsp页面内容不确定，高度不确定。父页面的clueReportENIframe无法设定高度。
　　这时，可以在子页面添加如下代码：
　　
　　function load(){
　　parent.document.getElementById("clueReportENIframe ").style.height = document.body.scrollHeight +"px";
　　parent.document.getElementById("clueReportENIframe ").style.width = document.body.scrollWidth +"px";
　　}
　　
　　
　　可以根据子页面高度和宽度，自动设置父页面的iframe高度。