很多人一直都有个想法&＃xff0c;要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include&＃xff0c;require实现统一多页面布局的能力。

通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面&＃xff0c;一个页面是iframe所在页面(页面名称&＃xff1a;iPage.html)&＃xff0c;另一个页面是iframe属性src指向页面&＃xff08;页面名称&＃xff1a;srcPage.html&＃xff09;。

iPage.html&＃xff0c;里dom&＃xff1a;

<iframe id&＃61;“iId“ name&＃61;“iName“ src&＃61;“srcPage.html“ scrolling&＃61;“no“ frameborder&＃61;“0“></iframe>

srcPage.html&＃xff0c;里dom&＃xff1a;

<h1>妹妹的一天</h1>
<p>早上吃早点&＃xff0c;中午约会吃饭&＃xff0c;下午K歌&＃xff0c;晚上和哥哥瞎折腾</p>

下面讨论ie下JS是怎么操作以上两个页面&＃xff0c;再讨论firefox的做法&＃xff0c;最后给出兼容ie,firefox浏览器操作iframe对象的方法。

 

一、ie下访问操作iframe里内容

 

大家都知道iframe是非标准html标签&＃xff0c;它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话&＃xff0c;嘿嘿)

1. ie通过document.frames["IframeName"]获取它&＃xff0c;例子&＃xff1a;我们在iPage.html里输出srcPage.html里h1的内容&＃xff0c;JS如下&＃xff1a;

alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);

你会发现这样在页面里加入代码&＃xff0c;好像并没有输出想要的东东&＃xff0c;为什么呢&＃xff1f;这个我也没有搞清楚&＃xff0c;只是习惯性的加入了window.onload就有输出了&＃xff08;注&＃xff1a;JS代码都写到这个事件里去&＃xff09;&＃xff0c;知道的人士可否告诉我下。why?更改之后代码ie下有了输出&＃xff0c;firefox下document.frames没有定义错误提示&＃xff1a;

window.onload &＃61; (function () {
alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});

2. ie另一种方法contentWindow获取它&＃xff0c;代码&＃xff1a;

window.onload &＃61; (function () {
var iObj &＃61; document.getElementById(‘iId‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});

此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过&＃xff0c;好事啊&＃xff01;嘿嘿。&＃xff08;网上一查&＃xff0c;发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞&＃xff0c;有脚本注入***的危险。

后来听说可以在后台防止这样的事情发生&＃xff0c;算是松了口气。不过还是希望firefox新版本可以解决这样的危险。&＃xff09;

3.改变srcPage.html里h1标题内容&＃xff0c;代码&＃xff1a;

iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML&＃61;‘我想变成她一天的一部分‘;

通过contentWindow后访问里面的节点就和以前一样了。

二、firefox下访问操作iframe里内容

Mozilla支持通过IFrameElmRef.contentDocument访问iframe的document对象的W3C标准&＃xff0c;通过标准可以少写一个document,代码&＃xff1a;

var iObj &＃61; document.getElementById(‘iId‘).contentDocument;
alert(iObj.getElementsByTagName(‘h1‘)[0].innerHTML&＃61;‘我想变成她一天的一部分‘);
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);

兼容这两种浏览器的方法&＃xff0c;现在也出来了&＃xff0c;就是使用contentWindow这个方法。

嘿嘿&＃xff01;操作iframe是不是可以随心所欲了呢&＃xff1f;如果还觉得不爽&＃xff0c;你甚至可以重写iframe里的内容。

三、重写iframe里的内容

通过designMode&＃xff08;设置文档为可编辑设计模式&＃xff09;和contentEditable&＃xff08;设置内容为可编辑&＃xff09;&＃xff0c;你可以重写iframe里的内容。代码&＃xff1a;

var iObj &＃61; document.getElementById(‘iId‘).contentWindow;
iObj.document.designMode &＃61; ‘On‘;
iObj.document.contentEditable &＃61; 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();

这两个对象的资料可参考&＃xff1a;http://msdn.microsoft.com/en-us/library/ms533720(VS.85).aspx

firebug测试以上代码性能,如图

注释掉
iObj.document.designMode &＃61; ‘On’;
iObj.document.contentEditable &＃61; true;

如图&＃xff1a;

效果没有变&＃xff0c;时间效率是注释前的将近三倍。嘿嘿。那两个对象是参考网络一些人的写法&＃xff0c;重写iframe里内容&＃xff0c;其实没有必要用designMode和contentEditable&＃xff0c;除非有其他的需求。

四、iframe自适应高度

有了上面的原理要实现这个相当简单&＃xff0c;就是把iframe的height值设置成它里面文档的height值就可以。代码&＃xff1a;
window.onload &＃61; (function () {
var iObj &＃61; document.getElementById(‘iId‘);
iObj.height &＃61; iObj.contentWindow.document.documentElement.scrollHeight;
});
现在对JS操作iframe你已经有了全新的认识&＃xff0c;说不定那天会因为这个有什么新的web技术名词&＃xff0c;嘿嘿&＃xff0c;臭美下&＃xff01;

 

 

转载自http://ued.alipay.com/wd/2008/11/08/js%E8%B7%A8%E5%9F%9F%E8%AE%BF%E9%97%AE%E6%93%8D%E4%BD%9Ciframe%E9%87%8C%E7%9A%84dom/