很多人一直都有个想法，要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include，require实现统一多页面布局的能力。
通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。
iPage.html，<body>里dom：
- <iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>
srcPage.html，<body>里dom：
- <h1>妹妹的一天</h1>
- <p>早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾</p>
下面讨论ie下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容ie,firefox浏览器操作iframe对象的方法。
一、ie下访问操作iframe里内容
大家都知道iframe是非标准html标签，它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话，嘿嘿)
1. ie通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下：
- alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
你会发现这样在页面里加入代码，好像并没有输出想要的东东，为什么呢？这个我也没有搞清楚，只是习惯性的加入了window.onload就有输出了（注：JS代码都写到这个事件里去），知道的人士可否告诉我下。why?更改之后代码ie下有了输出，firefox下document.frames没有定义错误提示：
- window.onload = (function () {
- alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
- });
2. ie另一种方法contentWindow获取它，代码：
- window.onload = (function () {
- var iObj = document.getElementById(‘iId‘).contentWindow;
- alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
- });
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）
3.改变srcPage.html里h1标题内容，代码：
- iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘;
通过contentWindow后访问里面的节点就和以前一样了。
二、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技术名词，嘿嘿，臭美下！
转载：http://www.hbjjrb.com/Jishu/Javascript/200903/154763.html
JS 操作iframe的更多相关文章
-
原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
-
[置顶] js操作iframe兼容各种浏览器
在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...
-
JS操作iframe
1. 获得iframe的window对象 存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWin ...
-
js操作iframe总结
一 在父页面操作子页面 IE下操作IFrame内容的代码: document.frames["MyIFrame"].document.getElementById(" ...
-
JS操作iframe元素
1. demo1.html页面中有个iframe元素,iframe元素的src是iframe1.html,怎么在demo1.html页面中操作iframe1.html页面 答曰:demo1.html ...
-
js操作iframe框架时应该屡清楚的一些概念
1.获取iframe的window对象 存在跨域访问限制. iframeElement.contentWindow 兼容 2.获取iframe的document对象 存在跨域访问限制. chrome: ...
-
js操作Iframe非当前最上层窗体
如果当前窗口不是最上层窗口(比如是在Iframe中),那么就把自己变为最上层窗口. <script language="javascript" type="tex ...
-
百度地图和js操作iframe
document.getElementById("ifarme-63").contentWindow.document.getElementById("qksv" ...
-
JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
随机推荐
-
Lr IP欺骗设置
IP欺骗设置IP工具:IP Wizard 开启IP欺骗时会关闭DHCP(也就是关闭IP自动获取 更改为手动设置IP) 注:添加IP欺骗,和释放IP,都要重启机器后才会生效,IP Wizard要管理员身 ...
-
docker-7 docker在阿里云的使用
在传统模式中,开发团队在开发环境中完成软件开发,自己做了一遍单元测试, 测试通过,ᨀ交到代码版本管理库.运维把应用部署到测 试环境, QA 进行测试,没问题后通知部署人员发布到生产环境. 在上述过程中 ...
-
nginx.conf的events，http段一般固定配置
nginx.conf的events,http段一般固定配置 user nobody nobody; #使用的用户可以按照实际情况修改 worker_processes ; #指定nginx开启的进程数 ...
-
log4j 使用笔记整理中
Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式. 日志信息的常用的优先级从高到低有ERROR.WARN. INFO.DEBUG,分别用来指定这条日志信息的重 ...
-
java11 Guava:谷歌开发的集合库
Guava:谷歌开发的集合库,通过build path->Add External JARs 把guava.jar包加进去. 版本控制工具:.CVS .SVN .git 所以需要下载git客户端 ...
-
PC-CSS-分隔线
单个标签实现分隔线: 点此查看实例展示 .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: ...
-
现代OpenGL教程 01 - 入门指南
原文链接传送门 译序 早前学OpenGL的时候还是1.x版本,用的都是glVertex,glNormal等固定管线API.后来工作需要接触DirectX9,shader也只是可选项而已,跟固定管线一起 ...
-
编译filezilla
编译zilla的时候,需要用到与mysql连接的地方(这里先忽略zila的编译) VC听过mysql connector c++, 下载了1.1.3版本,然后飞安装包,之后从官网上下载boost 把库 ...
-
webservice wsdl语法基础
XML-WSDL基础知识 WSDL 1.1. WSDL 简介 1.1.1. 概述 WSDL 指网络服务描述语言 (Web Services Description Language) WSDL ...
-
【C++/函数】实验2
1.实验内容 函数声明和函数定义: 形参和实参: 主调函数把实参的值传送给被调函数的形参从而实现主调函数向被调函数的数据传送. 形参:形式参数,表示主调函数与被调函数之间的联系.标识了在形参出现的位置 ...