用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相关推荐

  1. iframe.contentWindow 属性:关于contentWindow和contentDocument区分

    定义和用法 contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档,可以通过所有标准的 DOM 方法来处理被返回的对象. 语法:frameObject.content ...

  2. contentWindow 和contentDocument区别 及iframe访问

    a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象. b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...

  3. 获取iframe中的contentWindow

    function getIframeWindow(iframeElement){ return iframeElement.contentWindow || iframeElement.content ...

  4. iframe.contentWindow介绍

    iframe.contentWindow介绍 一.在使用iframe的页面,要操作这个iframe里面的DOM元素可以用: contentWindow.contentDocument(测试的时候chr ...

  5. html 提交表单,图片和文字一起提交,图片存入服务器,图片地址和表单信息存入数据库,带后端php代码

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. html <!DOCTYPE html> <html><head>< ...

  6. javascript之iframe

    iframe可以做的事情: 实现跨域 解决IE6下select遮挡不住的问题 解决ajax的前进后退问题 实现异步上传 iframe基本知识 iframe元素会创建包含另外一个文档的内联框架 操作if ...

  7. html 打印时隐藏,html 打印相关操作与实现详解

    原理为调用 window.print() 方法,但是该方法只能对当前页面全部打印,所以有了以下方案来解决局部打印 1: 利用 iframe 将需要打印的元素和样式注入 再调用打印 // 示例代码 fu ...

  8. JS操作iframe

    1. 获得iframe的window对象 2. 获得iframe的document对象 3. iframe中获得父页面的window对象 4. 获得iframe在父页面中的html标签 5. ifra ...

  9. helper.js(20170612)

    //***************************************参数辅助对象***************************************///公共参数辅助对象 va ...

最新文章

  1. 海贼王热血航线正在连接服务器,《航海王热血航线》无法进入原因和解决方法 进不去如何解决...
  2. loadrunner 更新中......
  3. 【OpenGL】十三、OpenGL 绘制三角形 ( 绘制单个三角形 | 三角形绘制顺序 | 绘制多个三角形 )
  4. 10 个非常有用的 AngularJS 框架
  5. 属性值动态调整_这可能是你见过最牛的CAD粗糙度动态块了!
  6. 在CentOS上安装Docker
  7. 为什么我们一直赚不到钱?
  8. Kubernetes学习之路(26)之kubeasz+ansible部署集群
  9. Codeforces Round #102 (Div. 1) D Help Shrek and Donkey 2
  10. getinfo怎么用php,PHP的函数curl-curl_getinfo
  11. 线上CPU飙升问题排查
  12. android手机相册多张上传,一键批量上传手机照片到QQ相册功能 节省手机流量
  13. 物联网如何测试(一)
  14. 【读论文】基于深度学习的铁路道岔转辙机故障诊断(3DESIGN)
  15. METIS安装与使用
  16. Eggjs笔记:egg-mongoose插件的集成,crud操作, 多表关联查询
  17. R语言survival包clogit函数构建条件logistic回归模型、summary函数查看模型汇总统计信息、通过似然比检验分析结果判断模型有无统计学意义
  18. app切换到后台一分钟后锁定,需要输入手势密码才能打开(程序锁)
  19. Linux中如何优雅的批量合并、拆分、加密pdf文件
  20. Task 4: Contextual Word Embeddings

热门文章

  1. gdb和arm-linux-gdb命令详解
  2. JBI学习笔记(转载于gaolin_bei)
  3. AES 文档加密器
  4. 奇舞javaScript BOM DOM - 笔记
  5. 为什么你一直是打工仔?
  6. 人力资源管理:理论与实务第五章
  7. 干货│步步为赢,ChIP实验攻略(中篇)
  8. 三星860 evo 250g 开启AHCI模式读写对比
  9. AIX添加lun 方式
  10. 写了100万行代码的程序员?