深入解析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动态添加删除div 具体实现
Jul 20 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
layui文件上传实现代码
May 20 Javascript
angular select 默认值设置方法
Jun 23 Javascript
node.js基础知识小结
Feb 26 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
微信小程序使用蓝牙小插件
Sep 23 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP静态新闻列表自动生成代码
2007/06/14 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
python实现寻找最长回文子序列的方法
2018/06/02 Python
关于python写入文件自动换行的问题
2018/06/23 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
简单了解django文件下载方式
2020/02/10 Python
python标准库OS模块详解
2020/03/10 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
python中if嵌套命令实例讲解
2021/02/25 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
《两只鸟蛋》教学反思
2014/02/10 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
新员工考核评语
2014/12/31 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
邹越演讲观后感
2015/06/15 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python