来源：http://www.kale100.cn/article/web/24.htm
最近在编写研究Fck编辑器控件，也有同事问我iframe高度自适应的问题，其实这都是操作iframe的对象问题，希望看了这篇文章后能解决大家的疑惑。
这样的操作需要提供两个页面，一个页面是iframe所在页面(页面名称：parent.htm)，另一个页面是iframe属性src指向页面（页面名称：child.htm）。
parent.htm，<body>里dom：
1 <iframe id="iId" name="iName" src="frame.htm" scrolling="no" frameborder="1" style=" border:solid 1px blue"></iframe>
child.htm，<body>的元素如下：
1 <body style=" height:400px; vertical-align:top">
2 这是Frame红的DIV<br />
3 高度时400px
4 </body>
获取Iframe对象内容
1 function getFrameContent() {
2 var iObj = document.getElementById("iId").contentWindow;
3 alert(iObj.document.getElementsByTagName("body")[0].innerHTML);
4 }
iframe对象的contentWindow属性在ie6,ie7,firefox2.0,firefox3.0下都测试通过，大家可以放心使用。
设置Iframe的高度随frame的内容高度自适应
1 function setFrameHeight() {
2 var iObj = document.getElementById('iId');
3 iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;
4 }
在网上有很多设置iframe内容自适应的代码网上看到很多，我试了，很多很麻烦都不能用，其实并不复杂。只需在iframe onload的时候运行这个函数就行了。
设置Iframe的内容自适应
1 function setFrameEdit() {
2 var iObj = document.getElementById('iId').contentWindow;
3 iObj.document.designMode = 'On';
4 iObj.document.contentEditable = true;
5 iObj.document.open();
6 iObj.document.writeln('<html><head>');
7 iObj.document.writeln('<style>body {font-size:9pt;margin: 2px; padding: 0px;}</style>');
8 iObj.document.writeln('</head><body></body></html>');
9 iObj.document.close();
10 }
什么效果，大家看看下面的Demo就明白了，iframe变成了一个可编辑得编辑区，现在网站上的编辑器都是用这个原理进行的。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。