网络编程
位置：首页>> 网络编程>> JavaScript>> 用JS访问操作iframe框架里的dom（2）

用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技术名词，嘿嘿，臭美下！

第一页 上一页 1
2
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com