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 ...
随机推荐
- SSWR 跟 进一法除法
1.对于浮点数SSWR float x = 3.456; //保留到小数点后两位 ) + 0.5) / 100.0; //output b = 3.46; 2.对于整数SSWR float x ; ...
- 【转】VS常用快捷键
每次在网上搜关于VS有哪些常用快捷键的时候,出来的永远是一串长的不能再长的列表,完全没体现出“常用”二字,每次看完前面几个就看不下去了,相信大家都 有这种感觉.其实我们平时用的真的只有很少的一部分,借 ...
- [Codeforces 1027 F] Session in BSU [并查集维护二分图匹配问题]
题面 传送门 思路 真是一道神奇的题目呢 题目本身可以转化为二分图匹配问题,要求右半部分选择的点的最大编号最小的一组完美匹配 注意到这里左边半部分有一个性质:每个点恰好连出两条边到右半部分 那么我们可 ...
- [bzoj] 2716 天使玩偶 || CDQ分治
原题 已知n个点有天使玩偶,有m次操作: 操作1:想起来某个位置有一个天使玩偶 操作2:询问离当前点最近的天使玩偶的曼哈顿距离 显然的CDQ问题,三维分别为时间,x轴,y轴. 但是这道题的问题在于最近 ...
- 牛客 2018NOIP 模你赛2 T2 分糖果 解题报告
分糖果 链接:https://www.nowcoder.com/acm/contest/173/B 来源:牛客网 题目描述 \(N\) 个小朋友围成一圈,你有无穷个糖果,想把其中一些分给他们. 从某个 ...
- gulp技巧总结
1. gulp.dest 会自动创建目录 gulp.dest(dir),若dir不存在,gulp会自动创建它 2. gulp.src copy具名路径(即不子目录**的路径)的文件,不会保留文件夹路径 ...
- 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 ...
- css垂直居中的几种方式
1. 对于可以一行处理的 设置 height:apx; line-height:apx; 2.对于一段文字(会多行显示的) ->2.1如果是可以设置一个固定高度的 ...
- MFC CString GetBuffer/ReleaseBuffer 的使用条件
今天为了通过串口往单片机里写一个16进制字符去控制单片机的adc的起停,结果糊涂到把'\x01'误写成'\0x01',怎么也得不到意想的结果,程序员有时候会犯低级错误,有时候怎么也跳不出去,这时候 ...
- android hook 框架 libinject2 如何实现so注入
Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2 如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...