深入解析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 validator 插件增加日期比较方法
Feb 21 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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 array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
WebPack配置vue多页面的技巧
2018/05/15 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
Python中实现switch功能实例解析
2018/01/11 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
django基础学习之send_mail功能
2019/08/07 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
什么是servlet链?
2014/07/13 面试题
生日邀请函范文
2014/01/13 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
校长寄语大全
2014/04/09 职场文书
2014年教务处工作总结
2014/12/03 职场文书
自我检讨书范文
2015/01/28 职场文书
玄武湖导游词
2015/02/05 职场文书
2015公司年度工作总结
2015/05/14 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android