深入解析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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 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桌面中心(二) 数据库写入
2007/03/11 PHP
php生成缩略图的类代码
2008/10/02 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
php中autoload的用法总结
2013/11/08 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
php实例化一个类的具体方法
2019/09/19 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
学校消防安全制度
2014/01/30 职场文书
材料员岗位职责
2014/03/13 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
新郎答谢词
2015/01/04 职场文书
大学生军训感言
2015/08/01 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python