定义和用法

  contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象

  语法:frameObject.contentWindow,或者 iframeObject.contentWindow(不是jquery对象)

  用iframe嵌套页面时,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument,其区别如下:

  1、contentWindow  这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一部分,但各个主流浏览器都支持。

  2、contentDocument  Firefox 支持,IE6,IE7都不支持,IE8开始支持,需要如此访问 document.frames['J_mainframe'].document。

  兼容获取document对象:

var getIFrameDoc = function(){
var iobj = document.createElement("iframe");
document.getElementsByTagName("body")[].appendChild(iobj);
return iobj.contentDocument || iobj.contentWindow.document;
}

  基本使用:

1、document.getElementById("myiframe").contentWindow,得到iframe对象后,就可以通过contentWindow得到iframe包含页面的window对象,然后就可以正常访问页面元素了;

2、$("#myiframe")[0].contentWindow,jquery选择器获得iframe,先把jquery对象转换为DOM对象,或者使用get()方法转换;

3、$("#myiframe")[0].contentWindow.$("#dd").val(),可以在得到iframe的window对象后接着使用jquery选择器进行页面操作;

4、$("#myiframe")[0].contentWindow.username="zhangsan"; 可以通过这种方式向iframe页面传递参数,在iframe页面window.username就可以获取到值,username是自定义的全局变量

5、在iframe页面通过parent可以获得主页面的window,接着就可以正常访问父亲页面的元素了;

6、parent.$("#frame_A")[0].contentWindow.document.getElmentById("#frame_B"); 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作;

//在子级iframe设置 父级 iframe ,或 孙级 iframe 高度。
function showIframeH(){
var parentWin = parent.document.getElementById("test");
if(!parentWin) return false; var sub = parentWin.contentWindow.document.getElementById("test2");
if(!sub) return false; var thirdHeight = sub.contentWindow.document.body.offsetHeight; //第三层 body 对象 sub.height = thirdHeight; //设置第二层 iframe 的高度 var secondHeight = parentWin .contentWindow.document.body.offsetHeight; //第二层 body 对象
parentWin .height = secondHeight; //设置第一层 iframe 的高度
}

一、在使用iframe的页面时,要操作这个iframe里面的DOM元素可以用:contentWindow、contentDocument

1、先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素

例子:

var ifr = document.getElementById("iframe");
ifr.contentWindow.document.getElementById("XXXXX") <iframe src="a.html" id=""></iframe>

  ifr.contentWindow 这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:

  window.parent、window.top(这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("XXXXX") <iframe src="a.html" id=""></iframe>

实例:

  top.$("iframe[name='iframeWindow']")[0].contentWindow.$("#inside_tableElement"),这样才能获取到iframe里的元素,
  注意:top.$("iframe[name='iframeWindow']").eq(0).$("#inside_tableElement"),是获取不到的
 
  再可以看看之前写的这篇博客:jquery 获取父窗口的元素、父窗口、子窗口

iframe.contentWindow 属性:关于contentWindow和contentDocument区分的更多相关文章

  1. IFrame与window对象(contentWindow)

    ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...

  2. jquery得到iframe src属性值的方法

    这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...

  3. 如何获取监听iframe src属性的变化进行后续操作

    应用场景,当iframe内发生点击事件内容改变时,如果我们想获取变化后的iframe的 src 属性值,就可以使用如下方式去获取 <iframe id="taobaoOrder&quo ...

  4. iframe 标签属性解读

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

  5. iframe初始化属性

    <iframe id="user" src="xxx.html" frameborder="0" width="" ...

  6. 关于justify-content属性的再学习(区分三个属性)

    justify-content属性: 用来表示可伸缩项目在主轴方向上的对齐方式: 取值范围为flex-start,flex-end,center,space-between,space-around: ...

  7. 原生JS操作iframe里的dom

    转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...

  8. JavaScript对iframe的DOM操作

    在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...

  9. iframe的Dom操作

    我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(ifram ...

随机推荐

  1. SSWR 跟 进一法除法

      1.对于浮点数SSWR float x = 3.456; //保留到小数点后两位 ) + 0.5) / 100.0; //output b = 3.46; 2.对于整数SSWR float x ; ...

  2. 【转】VS常用快捷键

    每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...

  3. [Codeforces 1027 F] Session in BSU [并查集维护二分图匹配问题]

    题面 传送门 思路 真是一道神奇的题目呢 题目本身可以转化为二分图匹配问题,要求右半部分选择的点的最大编号最小的一组完美匹配 注意到这里左边半部分有一个性质:每个点恰好连出两条边到右半部分 那么我们可 ...

  4. [bzoj] 2716 天使玩偶 || CDQ分治

    原题 已知n个点有天使玩偶,有m次操作: 操作1:想起来某个位置有一个天使玩偶 操作2:询问离当前点最近的天使玩偶的曼哈顿距离 显然的CDQ问题,三维分别为时间,x轴,y轴. 但是这道题的问题在于最近 ...

  5. 牛客 2018NOIP 模你赛2 T2 分糖果 解题报告

    分糖果 链接:https://www.nowcoder.com/acm/contest/173/B 来源:牛客网 题目描述 \(N\) 个小朋友围成一圈,你有无穷个糖果,想把其中一些分给他们. 从某个 ...

  6. gulp技巧总结

    1. gulp.dest 会自动创建目录 gulp.dest(dir),若dir不存在,gulp会自动创建它 2. gulp.src copy具名路径(即不子目录**的路径)的文件,不会保留文件夹路径 ...

  7. Codeforces Round #357 (Div. 2) A

    A. A Good Contest time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  8. css垂直居中的几种方式

    1. 对于可以一行处理的 设置 height:apx; line-height:apx; 2.对于一段文字(会多行显示的)            ->2.1如果是可以设置一个固定高度的      ...

  9. MFC CString GetBuffer/ReleaseBuffer 的使用条件

      今天为了通过串口往单片机里写一个16进制字符去控制单片机的adc的起停,结果糊涂到把'\x01'误写成'\0x01',怎么也得不到意想的结果,程序员有时候会犯低级错误,有时候怎么也跳不出去,这时候 ...

  10. android hook 框架 libinject2 如何实现so注入

    Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2  如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...