深入解析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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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和ACCESS写聊天室(二)
2006/10/09 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
解析php常用image图像函数集
2013/06/24 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python类中super() 的使用解析
2019/12/19 Python
Python Selenium参数配置方法解析
2020/01/19 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
心得体会怎么写
2013/12/30 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python