深入解析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 相关文章推荐
Javascript 设计模式(二) 闭包
May 26 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
模仿OSO的论坛(三)
2006/10/09 PHP
PHP新手上路(九)
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Django保护敏感信息的方法示例
2019/05/09 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python 异步async库的使用说明
2020/05/04 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
opencv 阈值分割的具体使用
2020/07/08 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
军校本科大学生自我评价
2014/01/14 职场文书
双方协议书
2014/04/22 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
综艺节目策划方案
2014/06/13 职场文书
田径运动会通讯稿
2014/09/13 职场文书
民间借贷借条如何写
2015/05/26 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js