深入解析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权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
JavaScript实现手风琴效果
Feb 18 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php 猴子摘桃的算法
2017/06/20 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python计算两个数的百分比方法
2018/06/29 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
会话Bean的种类
2013/11/07 面试题
个性大学生自我评价
2013/12/04 职场文书
《王二小》教学反思
2014/02/27 职场文书
个人整改措施书面材料
2014/10/24 职场文书
答谢词范文
2015/01/05 职场文书
入党自传范文2015
2015/06/26 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers