如何让iframe自适应高度

Posted 2023-04-13

参考技术A IFrame需要如何自适应高度呢？
要是我们能够知道IFrame所加载页面的高度，然后设置IFrame的高度为所加载页面的高度，那么就可以达到自适应高度了。

那要怎么知道IFrame所加载页面的高度？
var clientHeight = $("#mainFrame").contents().find("body").height();
使用jQuery去查找IFrame中的body的高度，那么clientHeight就是我们想要的了。

但是我们要在什么时候去查找IFrame中的body呢？当然必须在IFrame加载完成的时候，要是IFrame还未加载完成，那我们如何取出它的body.
$("#mainFrame").load(function()
var clientHeight = $("#mainFrame").contents().find("body").height();
$(this).height(clientHeight);
);

这个世界是不是美好了很多?

btw: 2009-12-16
今天修改了IFrame里的结构为
<div id="main"></div> float: left;
<div id="right-sidebar"></div> float: left;
$("#mainFrame").contents().find("body").height(); 取出的值为0

这是为什么呢？因为使用了float，则脱离了文档结构，你可以通过Firebug移过去，可以看到body没有选中任何区域。
那我们该怎么办呢？
只有main和right-sidebar两部分，取高的那部分不就可以了。
var mainHeight = $("#mainFrame").contents().find("#main").height();
var rightHeight = $("#mainFrame").contents().find("#right-sidebar").height();
var clientHeight = Math.max(mainHeight, rightHeight);

如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)

最近在前端页面遇到了一个问题，我在一个页面中利用iframe框架引入了一个页面进来，但是这个页面的高度是不叫高的，高出电脑屏幕很多，

所以就引发了iframe框架一个滚动条，然后主页面一个滚动条，这样页面就出现了两个滚动条。在网上查了好久，一直没有好的方法，直到我在

网上看到了iframe高度自适应，才解决了这个问题。

自适应的意思是，iframe框架的高度自动适应引入的HTML文件的内容高度，显在页面上的iframe的高度就是引入的文件的高度，这样就解决了公用一个滚动条的问题

js代码：

function setIframeHeight(iframe) 
if (iframe) 
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) 
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;


;

window.onload = function () 
setIframeHeight(document.getElementById(‘external-frame‘));
;


html代码：
<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

参考网址：http://caibaojian.com/iframe-adjust-content-height.html（iframe高度自适应的6个方法）