定义和用法

  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. [poj] 1269 [zoj] 1280 Interesting Lines || 求两直线交点

    POJ原题 ZOJ原题 多组数据.每次给出四个点,前两个点确定一条直线,后两个点确定一条直线,若平行则输出"NONE",重合输出"LINE",相交输出" ...

  2. ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)

    1.ionic简介 为什么选用ionic: 1.     彻底开源且免费 2.     性能优异 3.     基于红的发紫的AngularJs 4.     漂亮的UI 5.     强大的命令行( ...

  3. 用IE滤镜实现的一些特效

    CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作 ...

  4. 【TEST】NOI-Linux可用 gedit c++精简配置 附Emacs日常配置

    这里是backup的测试随笔,用于测试 CSS / Markdown 效果. 同时也是是本菜鸡考场上一般使用的Gedit配置. 只有6行,挺短的.应该算好记吧. 使用之前记得勾选首选项里的外部工具. ...

  5. mac使用基础

    Mac 系统的桌面 Mac 的桌面是一个很炫的3D, 背景是一张“星空”图. 2 Dock:  在桌面的下方有一排图标, 叫Dock, 用来快速启动程序, 进入文件夹, 它同时还可以停靠正在运行的程序 ...

  6. Asp .Net MVC中常用过滤属性类

    /// <summary> /// /// </summary> public class AjaxOnlyAttribute : ActionFilterAttribute ...

  7. openGL深度缓冲区问题

    http://zhidao.baidu.com/question/368299839.html&__bd_tkn__=6aa9196c746cd3357f1eec74aeb127b395029 ...

  8. 和菜鸟一起学c之gcc编译过程及其常用编译选项【转】

    转自:http://blog.csdn.net/eastmoon502136/article/details/8162626 版权声明:本文为博主东月之神原创文章,未经博主允许不得转载. 上篇文章,知 ...

  9. 【C语言】32位,64位机器sizeof区别

    float, double : 采用IEEE标准浮点数格式,格式固定 float 32bit, double 64bit int一般和CPU寄存器长度有关,不过也和编译器,汇编器有关 由于C ,C++ ...

  10. Appium+python自动化1-环境搭建(上)【转载】

    前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...