编程 Javascript

深入解析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加载的时候就触发，完美融合。

深入解析contentWindow, contentDocument

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

dwr spring的集成实现代码

Mar 22 Javascript

JavaScript中判断整数的多种方法总结

Nov 08 Javascript

JavaScript使用encodeURI()和decodeURI()获取字符串值的方法

Aug 04 Javascript

javascript实现禁止复制网页内容汇总

Dec 30 Javascript

详解JavaScript的内置对象

Dec 07 Javascript

js实现点击按钮弹出上传文件的窗口

Dec 23 Javascript

关于Vue单页面骨架屏实践记录

Dec 13 Javascript

微信小程序实现登录注册tab切换效果

Dec 29 Javascript

JavaScript变量提升和严格模式实例分析

Jan 27 Javascript

JS使用new操作符创建对象的方法分析

May 30 Javascript

ES6 Proxy实现Vue的变化检测问题

Jun 11 Javascript

Node.js控制台彩色输出的方法与原理实例详解

Dec 01 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