用JS访问操作iframe框架里的dom(2)

作者:apple 来源:Alipay UED 时间:2008-11-10 13:05:00 

二、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技术名词,嘿嘿,臭美下!

标签:iframe,框架,dom,js
0
投稿

猜你喜欢

  • 快速掌握ASP连接11种数据库的常用语法

    2008-11-28 15:32:00
  • IIRF(Ionic's Isapi Rewrite Filt er)入门,在IIS上重写Url

    2007-09-23 12:16:00
  • 如何编写高质量的Javascript代码

    2011-03-07 16:04:00
  • Windows下ORACLE 10g完全卸载的方法分析

    2012-07-11 16:09:26
  • javascript 版 Bad Apple 字符动画

    2010-01-28 12:19:00
  • IE的有条件注释详解(附实例代码)

    2009-03-31 13:01:00
  • 元素层叠级别及z-index剖析

    2008-07-22 12:03:00
  • 使用SQL语句 INNER JOIN 联接表

    2008-04-27 20:31:00
  • 巧用Dreamweaver MX设计导航栏特效

    2009-07-10 13:17:00
  • 微软建议的ASP性能优化28条守则(6)

    2008-02-29 11:43:00
  • ASP生成XML文件

    2009-06-29 16:28:00
  • Javascript调用XML制作连动下拉框

    2007-09-17 12:55:00
  • 适合所有表的添加、删除、修改的函数

    2008-04-15 15:29:00
  • JavaScript Memoization

    2008-05-01 12:48:00
  • asp 分页函数,可以显示 1,2,3,4,5... 前十页,后十页,下一页,上一页

    2009-07-05 18:34:00
  • 清除SQL被注入恶意病毒代码的语句

    2010-03-03 09:59:00
  • asp如何创建一个Exchange用户?

    2009-11-14 20:52:00
  • asp 简单分页代码

    2011-03-11 10:53:00
  • Qzoneing主题视觉设计分享

    2009-07-21 18:12:00
  • 把网页中的电话号码生成图片的ASP程序

    2008-11-07 16:12:00
  • asp之家 网络编程 m.aspxhome.com