Iframe的高级操作
来源：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 >
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 }
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 }
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 }
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变成了一个可编辑得编辑区，现在网站上的编辑器都是用这个原理进行的。