iframe.contentWindow 属性:关于contentWindow和contentDocument区分
定义和用法
contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象。
语法:frameObject.contentWindow,或者 iframeObject.contentWindow(不是jquery对象)
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>
实例:
iframe.contentWindow 属性:关于contentWindow和contentDocument区分的更多相关文章
- IFrame与window对象(contentWindow)
ref:http://blog.csdn.net/dongzhiquan/article/details/5851201 var detialIframe=document.all("det ...
- jquery得到iframe src属性值的方法
这篇文章主要介绍了jquery得到iframe src属性值的方法,很简单,很实用,需要的朋友可以参考下 取得iframe src属性的的值: Html代码 <!DOCTYPE HTML> ...
- 如何获取监听iframe src属性的变化进行后续操作
应用场景,当iframe内发生点击事件内容改变时,如果我们想获取变化后的iframe的 src 属性值,就可以使用如下方式去获取 <iframe id="taobaoOrder&quo ...
- iframe 标签属性解读
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
- iframe初始化属性
<iframe id="user" src="xxx.html" frameborder="0" width="" ...
- 关于justify-content属性的再学习(区分三个属性)
justify-content属性: 用来表示可伸缩项目在主轴方向上的对齐方式: 取值范围为flex-start,flex-end,center,space-between,space-around: ...
- 原生JS操作iframe里的dom
转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentW ...
- JavaScript对iframe的DOM操作
在IE6.IE7中,我们可以使用 document.frames[ID].document 来访问iframe子窗口中的document对象,可是这是不符合W3C标准的写法,也是IE下独有的方法,在F ...
- iframe的Dom操作
我最近遇到这样一个需求, 抛开业务相关不谈,但从技术上说:页面中选择公司中的页面,在iframe中展示被选的页面,并且要对页面做一些Dom相关的处理.也就是说我们需要在父级页面中操作子页面(ifram ...
随机推荐
- [poj] 1269 [zoj] 1280 Interesting Lines || 求两直线交点
POJ原题 ZOJ原题 多组数据.每次给出四个点,前两个点确定一条直线,后两个点确定一条直线,若平行则输出"NONE",重合输出"LINE",相交输出" ...
- ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)
1.ionic简介 为什么选用ionic: 1. 彻底开源且免费 2. 性能优异 3. 基于红的发紫的AngularJs 4. 漂亮的UI 5. 强大的命令行( ...
- 用IE滤镜实现的一些特效
CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这一事实,然而,幸运的是,IE并非在这方面毫无作 ...
- 【TEST】NOI-Linux可用 gedit c++精简配置 附Emacs日常配置
这里是backup的测试随笔,用于测试 CSS / Markdown 效果. 同时也是是本菜鸡考场上一般使用的Gedit配置. 只有6行,挺短的.应该算好记吧. 使用之前记得勾选首选项里的外部工具. ...
- mac使用基础
Mac 系统的桌面 Mac 的桌面是一个很炫的3D, 背景是一张“星空”图. 2 Dock: 在桌面的下方有一排图标, 叫Dock, 用来快速启动程序, 进入文件夹, 它同时还可以停靠正在运行的程序 ...
- Asp .Net MVC中常用过滤属性类
/// <summary> /// /// </summary> public class AjaxOnlyAttribute : ActionFilterAttribute ...
- openGL深度缓冲区问题
http://zhidao.baidu.com/question/368299839.html&__bd_tkn__=6aa9196c746cd3357f1eec74aeb127b395029 ...
- 和菜鸟一起学c之gcc编译过程及其常用编译选项【转】
转自:http://blog.csdn.net/eastmoon502136/article/details/8162626 版权声明:本文为博主东月之神原创文章,未经博主允许不得转载. 上篇文章,知 ...
- 【C语言】32位,64位机器sizeof区别
float, double : 采用IEEE标准浮点数格式,格式固定 float 32bit, double 64bit int一般和CPU寄存器长度有关,不过也和编译器,汇编器有关 由于C ,C++ ...
- Appium+python自动化1-环境搭建(上)【转载】
前言 appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python.小编擅长Python,所以接下来的教程是appium+py ...