顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。
传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。
如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。
如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。
Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
主页面代码示例：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。
下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。
<!DOCTYPE HTML PUBLIC "
在主页面追加以下测试代码，以输出这两个值，代码示例：
<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">
function checkHeight() {
var iframe = document.getElementById("frame_content");
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
</script>
被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：
<div><button onclick="toggleOverlay()">Toggle Overlay</button>
</div>
<div style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
function toggleOverlay() {
var overlay = document.getElementById('overlay');
overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
</script>
下面列出以上代码在各浏览器的测试值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）
/
层隐藏时
层展开时
bHeight
dHeight
bHeight
dHeight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Safari 184 184 303 184
暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：
function reinitIframe(){var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。
如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。
这是最终的主页面的代码：
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
附Demo页面： 主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
怎么让iframe自适应浏览器的高度和宽度
1、首先设置样式：body{margin:0; padding:0;}。2、如果不设置body的margin和padding为0的话，页面上下左右会出现空白。代码如下：<iframe src=:\/\/fulibac id="myiframe" scrolling="no" frameborder="0"><\/iframe>。3、这个方法可以达到让iframe自适应高度的效果，但是如果将窗口放大或缩小效果就...
HTML的frame框架怎么自适应高度?
跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。a.html...
怎么让iframe自适应浏览器的高度和宽度
1、在文件夹里创建两个html文件，一个“index”一个“iframe”。2、在index中添加一个iframe标签，直接嵌入iframe页面。3、在iframe网页中添加了两个固定高度的div内容。4、浏览器打开index页面我们发现iframe部分有滚动条，需要滚动显示页面。5、现在我们在index页面的iframe标签再添加如下的属性。6、再次...
怎么让iframe自适应高度
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个...
vue工程中引用iframe,使其高度自适应
并正确读取页面高度。通过在mounted函数后延时一秒调用处理函数，我们能够确保iframe内的内容完全渲染完毕，从而准确地获取到页面高度，实现高度自适应。这种解决方案在处理跨域问题或包含动态加载内容的iframe时尤其有效。通过这样的方法，我们成功地解决了iframe高度自适应问题，优化了项目中iframe的使用体验。
iframe的高度可以随内容的多少而变化吗
1、首先在文件夹里创建两个html文件，一个“index”一个“iframe”。2、然后在index中添加一个iframe标签，直接嵌入iframe页面。3、接着在iframe网页中添加了两个固定高度的div内容。4、浏览器打开index页面，发现iframe部分有滚动条，需要滚动显示页面。5、现在在index页面的iframe标签再添加如下的属性。
Vue使用ifream遇到的问题?怎么处理跨域呢?
实现方式为给 body 设置 100% 宽度和高度，同时添加 overflow:hidden 属性以优化视觉效果，避免出现不必要的滚动条。一个简单的示例是将 iframe 的父级高度设置为 80%，而 iframe 自身的高度设置为 100%，以实现高度自适应。然而，这种方法的使用场景较为有限，应根据实际情况灵活应用。对于 iframe 的...
网页设计:怎么让frame的高度自适应??
高度自适应可以用Javascript 你每个iframe为一个单独的页面，只需在每个单独的页面中<head>与<\/head>之间加入如下代码即可实现firame高度的自适应：<script type="text\/javascript"> function setWindowSize(){ \/\/iframe自动本窗口高度 try{ var thiswin = window.parent.document.getElementById(window....
什么命令可以使iframe框架里的被引用页面宽高自适应框架宽高?_百度知 ...
思路是js控制iframe自适应高度，因为iframe本身并不能自适应高度，只有写死高度才行，所以要用js判断整个页面内容的高度。给你的代码:<iframe allowtransparency="true" src="你要入引的页面.htm" id="defaulIframePage" name="defaulIframePage" frameborder="0" scrolling="no" width="100%" onload=...
怎么让iframe的大小跟随内容的大小自动调整?
1.在一个文件夹中创建两个HTML文件，一个“index”和一个“iframe”。2.将iframe标记添加到索引中，并将其直接嵌入到iframe页面中。3.将两个具有固定高度的div内容添加到iframe页面。4.当浏览器打开索引页时，我们发现在iframe的部分有一个滚动条，需要滚动才能显示页面跟踪。5.现在，我们将以下属性...
