JS操作iframe里的dom
出自:http://www.css88.com/archives/2343
看到断桥残雪 对我上一篇日志的回复我也学习了一下JS操作iframe里的dom;主要参考了断桥残雪的《用JavaScript在IE和Firefox下进行iframe的DOM操作 》和支付宝UED的《用JS访问操作iframe里的dom 》,非常不错的两篇文章。
一、父级窗口操作iframe里的dom
JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所 在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进 行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器 。
相关的还有一个contentDocument属性,这个属性是指指定的frame或者iframe所在的document对象,但是悲剧的是,ie6-ie7并不支持这个属性。
ie6和ie7还可以使用document.frames["iframe Name"]或者 document.frames["iframe ID"]来获取相当于contentWindow属性,而firefox和chrome并不支持这些 document.frames["iframe Name"]或者document.frames["iframe ID"],但是window.frames["iframe Name"]或window.frames[index](index是索引值)也支持所有主流浏览器 ;
这个可以看实例:http://www.css88.com/demo/iframe-correspond/index-test.html
我们知道document对象是window对象的一个子对象,所以我们可以通过 document.getElementById(“iframe ID”).contentWindow.document来获取iframe的 document对象,相当于contentDocument属性。
二、iframe里的js操作父级窗口的dom
iframe里的js要操作父级窗口的dom,必须搞懂几个对象:
parent是父窗口(如果窗口是顶级窗口,那么parent==self==top),
top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),
self是当前窗口(等价window),
opener是用open方法打开当前窗口的那个窗口;
这样iframe里的js要操作父级窗口的dom可以通过parent,top这些对象来获取父窗口的window对象,例如:
parent.document.getElementById(“dom ID”);
parent,top还能调用父级窗口的的js方法,比如,getIFrameDOM(iID)是父级窗口的一个方法,那么iframe里可以使用parent.getIFrameDOM(“wIframeA”)来调用父级窗口的getIFrameDOM(iID)方法;
————————————————
查看一下JS操作iframe里的dom的demo:http://www.css88.com/demo/iframe-correspond/
虽然iframe在现在WEB开发中越来越少用到了,但是iframe还有很多值得使用的地方,比如使用iframe解决跨域问题.关于 iframe还有很多东西要学习,比如iframe自适应高度,使用iframe解决跨域问题,iframe加载问题,iframe加载性能问题等等,还 有很多东西要学习,
JS操作iframe里的dom相关推荐
- JS操作iframe
1. 获得iframe的window对象 2. 获得iframe的document对象 3. iframe中获得父页面的window对象 4. 获得iframe在父页面中的html标签 5. ifra ...
- js 延迟几秒执行ifarme_用JS控制iframe里的页面,做到3秒自动换一个。
展开全部 假定iframe的id为ifr 下面是js程序 var times = 10; //循环次数32313133353236313431303231363533e4b893e5b19e3133 ...
- js获取iframe里的元素
1.<iframe id="list_iframe" name="list_iframe"></iframe> iframe页面元素: ...
- js 操作 iframe
//页面内有两个iframe <table width="100%"> <tr width="100%"> &l ...
- js操作表格数据,DOM实现数据动态增删查改
项目文件下载 基本功能 demo中涉及到的管理员密码为:962464.当然啦,那是假的,代码里面能找到,随意修改,模拟敏感操作而生 1.增加 点击增加按钮,出现信息输入界面,输入完成后确认添加 2.删 ...
- js对iframe内外(父子)页面进行操作
怎么对iframe进行操作,1.在iframe里面控制iframe外面的js代码.2.在父框架对子iframe进行操作. 获取iframe里的内容 主要的两个API就是contentWindow,和c ...
- 原生js和jquery常用的DOM操作
前言 将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
- JS/JQuery操作iframe元素
JS操作iframe元素 父页面操作子页面 //获取iframe元素 var oIframe = document.getElementById('iframe1');oIframe.contentW ...
- JavaScript操作iframe之不得不说的秘密(一)
随着W3C一声令下,几年前使用非常频繁的frameset + frame已完成使命,光荣退伍.作为frameset的替代方案(姑且这么称吧),iframe的使用也多了起来.较frameset方案,if ...
最新文章
- R语言包_Matrix
- SpringBoot 使用WebMvcConfigurer处理请求
- 64 求1+2+3+...+n(发散思维能力 )
- IDEA访问数据库时,某一个字段数据库中有值但是访问到的数据始终是null
- [LeetCode] 143. Reorder List_Middle tag: Linked List
- 探索 Word 2007 开发(四):上传图片
- .NET下 Access与SQL Server的效率简易比较
- wincc做皮带动画_wincc 如何做动画
- 短链接java代码_java高仿新浪微博短链接地址生成工具ShortUrlGenerator.java
- 网络原创文章版权维护的辅助好工具copycheck抄袭检测软件
- 编程日记——第一次写博客
- java基础复习——day18(Stream流 ; 反射)
- 干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏
- HTTP协议漫谈 - HTTP协议历史和报文结构
- 腾讯云直播产品系列(一):标准直播POC实践
- 谐波小波matlab,基于MATLAB小波变换在电网谐波检测的仿真与研究
- En-Tan-Mo(ETM)项目周报(6月14日~6月20日)
- LNMP架构搭建以及部署DISCUZ!社区论坛应用
- 学生计算机测评安排,计算机系学生综合测评细则
- 第三方注解框架,黄牛刀.使用步骤和方法