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的内容自适应
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变成了一个可编辑得编辑区，现在网站上的编辑器都是用这个原理进行的。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端