深入解析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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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
简单的页面缓冲技术
2006/10/09 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
vue项目中使用fetch的实现方法
2019/04/25 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
Django中几种重定向方法
2015/04/28 Python
python中global用法实例分析
2015/04/30 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python实现中文文本分句的例子
2019/07/15 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
求职简历自荐信范文
2013/10/21 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
初中新生军训方案
2014/05/13 职场文书
企业宣传策划方案
2014/05/29 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
诚信考试主题班会
2015/08/17 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
python 爬取天气网卫星图片
2021/06/07 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers