深入解析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下高性能字符串连接StringBuffer类
Aug 16 Javascript
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
node.js实现爬虫教程
Aug 25 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
微信小程序实现文件预览
Oct 22 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_SELF的安全问题
2009/09/05 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
servlet面试题
2012/08/20 面试题
打架检讨书100字
2014/01/08 职场文书
财务部岗位职责
2015/02/03 职场文书
公司员工培训管理制度
2015/08/04 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android