用JS访问操作iframe框架里的dom（2）
作者：apple 来源：Alipay UED 发布时间：2008-11-10 13:05:00
标签：iframe,框架,dom,js
二、firefox下访问操作iframe里内容
Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准，通过标准可以少写一个document,代码：
var iObj = document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
兼容这两种浏览器的方法，现在也出来了，就是使用contentWindow这个方法。
嘿嘿！操作iframe是不是可以随心所欲了呢？如果还觉得不爽，你甚至可以重写iframe里的内容。
三、重写iframe里的内容
通过designMode（设置文档为可编辑设计模式）和contentEditable（设置内容为可编辑），你可以重写iframe里的内容。代码：
var iObj = document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode = ‘On‘;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(‘<html><head>‘);
iObj.document.writeln(‘<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>‘);
iObj.document.writeln(‘</head><body></body></html>‘);
iObj.document.close();
这两个对象的资料可参考：http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx
firebug测试以上代码性能,如图
注释掉 iObj.document.designMode = ‘On’;
iObj.document.contentEditable = true;
如图：
效果没有变，时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法，重写iframe里内容，其实没有必要用designMode和contentEditable，除非有其他的需求。
四、iframe自适应高度
有了上面的原理要实现这个相当简单，就是把iframe的height值设置成它里面文档的height值就可以。代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘);
iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;
});
现在对JS操作iframe你已经有了全新的认识，说不定那天会因为这个有什么新的web技术名词，嘿嘿，臭美下！
0
投稿猜你喜欢
今天在看见了一堆不错的非洲的web 2.0网站的Logo，于大家一起欣赏：非洲web2.0网站的logo大部分和平时看见的web2.0网站l- asp使用session来防止表单多次被提交的方法。formtest.asp' 表单文件<％Randomize&nb
- 写在前面：前一段时间 kejun 给我们培训JavaScript的时候，在幻灯片上推荐了很多特别经典的文章，其中就有这一篇。读过之后感觉很不
- 在曾经的 淘宝UED 招聘 中有这样一道题目：“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直
- javascript 常见汉字转换成拼音，上下行排列，方便对比，速度快，你可以把代码复制到本地，作为一个不错的汉字转换拼音的工具！转换效果图
- 浏览带有下拉菜单的网页时，我们经常会注意到当更改显示器分辨率时，其下拉菜单的位置并没有改变，这也是我们设计网页时容易忽略的一个问题，其实通过
- 在异步应用程序中发送和接收信息时，可以选择以纯文本和 XML 作为数据格式。掌握 Ajax 的这一期讨论另一种有用的数据格式 JavaScr
- 空白双边距是一个极容易误解的CSS特性.它不是CSS的bug,但如果我们一旦误解,将会给你带来很多麻烦.先看如下demo代码:<!do
- 前阵子刚完成一个B/S架构的学校办公系统，体会就是表太多，文件太多，而每个文件中类似的操作（代码）也太多了，例如学生信息和教师信息操作，st
- js浮点数计算有时是不准确的，比如7*0.8 == 7*8/10的值为false，因为7*0.8=5.6000000000000005，乘出
- 我以centos 4.4 下面的mysql 5.0.33 手工编译版本为例说明：vi /usr/local/mysql/bin/m
- ul设置浮动后不能自适应高度，也就是不能撑开父容器，不能自适应内容的高度。解决方法是在ul结束标签前加个清除浮动。 &
- 对于个人用户来说，除了病毒和木马，网页中的隐形代码也开始严重地威胁着我们的安全，但大多数人却缺乏自我保护意识，对隐形代码的危害认识不够，甚至
- 自从SQL Server 2005推出后，因为有了更好的性能，所以有很多与SQL Server 2000相关的应用程序需要升级到这个版本。但
- 我们在使用ASP 内置的ADO组件进行数据库编程时，通常是在脚本的开头打开一个连接，并在脚本的最后关闭它，但是就较大脚本而言，在多数情况下连
- SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象：矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组，包括图
- 随着ajax再网站建设中的的大范围流行，XmlHttp也自然被人们所熟悉。本文介绍了asp任何检测服务器端是否支持xmlhttp组件的方法，
- 前不久有个正要毕业的网友给我发邮件，他毕业设计需要实现锁屏的效果，但是他没有能看懂我之前发布的对话框源码，他问能不能把锁屏相关代码说明下，我
- CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本： if (window.XMLHt
- 问：SQL Server应该怎样访问Sybase数据库的表？答：具体方法如下：1: 安装Sybase客户端版本的要求:Sybase Clie
