深入解析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 Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 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编写的一个E-mail验证类
2015/03/25 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
node.js基础知识小结
2018/02/26 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
vue实现按钮切换图片
2021/01/20 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
详解python itertools功能
2020/02/07 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
《故乡》教学反思
2014/04/10 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
服务明星事迹材料
2014/12/29 职场文书
中班下学期个人总结
2015/02/12 职场文书
大学生团员个人总结
2015/02/14 职场文书
停水通知
2015/04/16 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis