深入解析contentWindow, contentDocument


Posted in Javascript onJuly 04, 2013

生活永远是一个大染缸,一块白布下去,黑布出来,一块黑布下去,一块七色布出来。

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

在子级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 = x.contentWindow.document.body.offsetHeight; //第二层 body 对象
  x.height = secondHeight; //设置第一层 iframe 的高度
  //alert(secondHeight);
  //alert('body: ' + x.contentDocument.body.offsetHeight + ' div:' + thirdHeight);
}

下面附一个实例,因为2345的推广,很多导航站都将网址直接换成2345的推广页面了,那就是当前域名下获取2345中的宽度,然后通过js设置iframe内容的高度,这样看起来是一个整体,核心内容如下

iframe

<body>
<iframe id="mainFrame" onload="mainFrameLoaded(this)" scrolling="no" src="https://www.2345.com/"></iframe>

js代码

<script>
	function mainFrameLoaded(t) 
	{
		//debugger;
		//alert(t.contentWindow.document.body.offsetHeight);
  t.style.height = t.contentWindow.document.body.offsetHeight + 'px';
	}
</script>

记住js写在前面,iframe在后面,通过onload加载的时候就触发,完美融合。

Javascript 相关文章推荐
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
javascript初学者常用技巧
Sep 02 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
node+vue实现文件上传功能
May 28 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
关于Javascript与iframe的那些事儿
Jul 04 #Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 #Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 #Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 #Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
You might like
PHP 的几个配置文件函数
2006/12/21 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
tab栏切换原理
2017/03/22 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python config文件的读写操作示例
2019/09/27 Python
python怎么提高计算速度
2020/06/11 Python
实例代码讲解Python 线程池
2020/08/24 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
改进工作作风心得体会
2016/01/23 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
详解Go语言中Get/Post请求测试
2022/06/01 Golang