原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343
一、父级窗口操作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和jquery里面的DOM操作进行了一下整理
创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...
- js获取iframe里面的dom
最近在写页面遇到了问题,一个dom好多地方用到,然后我就单独写了个html页面,然后用iframe引入,但是,想获取iframe里面input的value,获取不到input,后面才知道原来js不能直 ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS 操作iframe
很多人一直都有个想法,要是可以随心所欲的操作iframe就好了.这样静态页面也就有了相当于后台动态页面php,jsp,asp中include,require实现统一多页面布局的能力. 通过Javasc ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
随机推荐
- 【题解】Luogu P2146 [NOI2015]软件包管理器
题面:https://www.luogu.org/problemnew/lists?name=2146 这道题要用树链剖分,我博客里有对树链剖分的详细介绍 这道题就是树链剖分的模板,详细解释见程序. ...
- RMAN入门——简介
RMAN(Recovery Manager) 1.简介 RMAN(Recovery Manager)是随Oracle服务器软件一同安装的工具软件,它可以用来备份和恢复数据库文件.归档日志和控制文件 ...
- Jenkins 总结
步骤: 1,安装Jenkins 2,运行Jenkins: java -jar jenkins.war --httpPort=8888 httpPort指的就是Jenkins所使用的http端口,这里指 ...
- ODAC(V9.5.15) 学习笔记(五)TSmartQuery
TSmartQuery是相对于TOraQuery更简洁的数据集,其成员如下 名称 类型 说明 Expand Boolean 缺省为False,如果为True,则表示无论SQL中罗列的字段是哪些,数据集 ...
- SOAP和WebService的那些事
当初对这段历史有过一点研究,不过当初写得关于这部分历史的论文不知道被我丢哪儿去了,下面我用通俗一点的语言来话说一下这段历史吧,因为当初详细到具体人物具体时间的已经记不清了,所以这里写得不够专业,大家就 ...
- 开源代码中的autogen.sh干了些什么?
答:重新根据当前所处环境生成新的configure 分析脚本都做了些什么? 1. 指定make工具 MAKE=gmake or MAKE=make 2. 执行autoreconf autoreconf ...
- S.M.A.R.T.记录几块ssd硬盘
1.闪迪至尊超级速(Extreme pro) 2.三星sm961 (m2接口) 3.intel 750 (pice接口) ps: 因为sm961,intel750都是nvme协议,网上大部分软件测试都 ...
- fw-cloud-framework项目配置、启动问题
1.config组件:其配置优先级高于每个注册到同一个中心的工程的本地配置,所以在统一以dev这个 profile启动各个项目时,去config中心中找-dev结尾的各个工程名命名的文件. confi ...
- 论文阅读: End-to-end Learning of Action Detection from Frame Glimpses in Videos
End-to-End Learning of Action Detection from Frame Glimpses in Videos CVPR 2016 Motivation: 本 ...
- Java 大数任意进制转换
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner cin = ...