关于contentWindow和contentDocument
用iframe嵌套页面是,如果父页面要获取子页面里面的内容,可以使用contentWindow或者contentDocument,其区别如下:
a>contentWindow这是个只读属性,返回指定的iframe的窗口对象。它虽然不是标准的一部分,但各个主流浏览器都支持。 b>contentDocument Firefox 支持,IE6,IE7都不支持,IE8开始支持,需要如此访问 document.frames['J_mainframe'].document。 兼容获取document对象: var getIFrameDoc = function(){var iobj = document.createElement("iframe");document.getElementsByTagName("body")[0].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,接着就可以正常访问父亲页面的元素了; 7)parent.$("#frame_A")[0].contentWindow.document.getElmentById("#frame_B"); 同级iframe页面之间调用,需要先得到父亲的window,然后调用同级的iframe得到window进行操作; ------------------------------------------------------------------- 在子级iframe设置 父级 iframe ,或 孙级 iframe 高度。
functionshowIframeH(){
varparentWin=parent.document.getElementById("test"); if(!parentWin)returnfalse; varsub=parentWin.contentWindow.document.getElementById("test2"); if(!sub)returnfalse; varthirdHeight=sub.contentWindow.document.body.offsetHeight;//第三层 body 对象 sub.height=thirdHeight;//设置第二层 iframe 的高度 varsecondHeight=x.contentWindow.document.body.offsetHeight;//第二层 body 对象 x.height=secondHeight;//设置第一层 iframe 的高度 //alert(secondHeight); //alert('body: ' + x.contentDocument.body.offsetHeight + ' div:' + thirdHeight); } |
关于contentWindow和contentDocument相关推荐
- iframe.contentWindow 属性:关于contentWindow和contentDocument区分
定义和用法 contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象. 语法:frameObject.content ...
- contentWindow 和contentDocument区别 及iframe访问
a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...
- 获取iframe中的contentWindow
function getIframeWindow(iframeElement){ return iframeElement.contentWindow || iframeElement.content ...
- iframe.contentWindow介绍
iframe.contentWindow介绍 一.在使用iframe的页面,要操作这个iframe里面的DOM元素可以用: contentWindow.contentDocument(测试的时候chr ...
- html 提交表单,图片和文字一起提交,图片存入服务器,图片地址和表单信息存入数据库,带后端php代码
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. html <!DOCTYPE html> <html><head>< ...
- javascript之iframe
iframe可以做的事情: 实现跨域 解决IE6下select遮挡不住的问题 解决ajax的前进后退问题 实现异步上传 iframe基本知识 iframe元素会创建包含另外一个文档的内联框架 操作if ...
- html 打印时隐藏,html 打印相关操作与实现详解
原理为调用 window.print() 方法,但是该方法只能对当前页面全部打印,所以有了以下方案来解决局部打印 1: 利用 iframe 将需要打印的元素和样式注入 再调用打印 // 示例代码 fu ...
- JS操作iframe
1. 获得iframe的window对象 2. 获得iframe的document对象 3. iframe中获得父页面的window对象 4. 获得iframe在父页面中的html标签 5. ifra ...
- helper.js(20170612)
//***************************************参数辅助对象***************************************///公共参数辅助对象 va ...
最新文章
- 海贼王热血航线正在连接服务器,《航海王热血航线》无法进入原因和解决方法 进不去如何解决...
- loadrunner 更新中......
- 【OpenGL】十三、OpenGL 绘制三角形 ( 绘制单个三角形 | 三角形绘制顺序 | 绘制多个三角形 )
- 10 个非常有用的 AngularJS 框架
- 属性值动态调整_这可能是你见过最牛的CAD粗糙度动态块了!
- 在CentOS上安装Docker
- 为什么我们一直赚不到钱?
- Kubernetes学习之路(26)之kubeasz+ansible部署集群
- Codeforces Round #102 (Div. 1) D Help Shrek and Donkey 2
- getinfo怎么用php,PHP的函数curl-curl_getinfo
- 线上CPU飙升问题排查
- android手机相册多张上传,一键批量上传手机照片到QQ相册功能 节省手机流量
- 物联网如何测试(一)
- 【读论文】基于深度学习的铁路道岔转辙机故障诊断(3DESIGN)
- METIS安装与使用
- Eggjs笔记:egg-mongoose插件的集成,crud操作, 多表关联查询
- R语言survival包clogit函数构建条件logistic回归模型、summary函数查看模型汇总统计信息、通过似然比检验分析结果判断模型有无统计学意义
- app切换到后台一分钟后锁定,需要输入手势密码才能打开(程序锁)
- Linux中如何优雅的批量合并、拆分、加密pdf文件
- Task 4: Contextual Word Embeddings