编程 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 相关文章推荐

Open and Print a Word Document

Jun 15 Javascript

js定时器怎么写？就是在特定时间执行某段程序

Oct 11 Javascript

各种常用的JS函数整理

Oct 25 Javascript

js/jquery获取文本框输入焦点的方法

Mar 04 Javascript

js实现跨域访问的三种方法

Dec 09 Javascript

JavaScript数值千分位格式化的两种简单实现方法

Aug 01 Javascript

JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

Aug 01 Javascript

jQuery实现单击按钮遮罩弹出对话框效果（1）

Feb 20 Javascript

JS实现数组去重及数组内对象去重功能示例

Feb 02 Javascript

jquery多级树形下拉菜单的实例代码

Jul 09 jQuery

小程序wx.getUserProfile接口的具体使用

Jun 02 Javascript

代码解析React中setState同步和异步问题

Jun 03 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