快捷導(dǎo)航

深入解析contentWindow, contentDocument

更新時(shí)間：2013年07月04日 14:47:59 投稿：jingxian

沒(méi)有永恒的技術(shù)只有需求,沒(méi)有好說(shuō)的客戶只有無(wú)奈的開(kāi)發(fā)者,如果iframe的出現(xiàn)是一個(gè)錯(cuò)誤的話,iframe里邊在來(lái)一個(gè)iframe那是錯(cuò)上加錯(cuò),神話沒(méi)有在遠(yuǎn)古的塵囂中消失,卻在懷具的今天不斷上演

生活永遠(yuǎn)是一個(gè)大染缸，一塊白布下去，黑布出來(lái)，一塊黑布下去，一塊七色布出來(lái)。

contentWindow 兼容各個(gè)瀏覽器，可取得子窗口的 window 對(duì)象。
contentDocument Firefox 支持，> ie8 的ie支持?？扇〉米哟翱诘?document 對(duì)象。

在子級(jí)iframe設(shè)置父級(jí) iframe ，或孫級(jí) 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 對(duì)象
  sub.height = thirdHeight; //設(shè)置第二層 iframe 的高度
  var secondHeight = x.contentWindow.document.body.offsetHeight; //第二層 body 對(duì)象
  x.height = secondHeight; //設(shè)置第一層 iframe 的高度
  //alert(secondHeight);
  //alert('body: ' + x.contentDocument.body.offsetHeight + ' div:' + thirdHeight);
}

下面附一個(gè)實(shí)例，因?yàn)?345的推廣，很多導(dǎo)航站都將網(wǎng)址直接換成2345的推廣頁(yè)面了，那就是當(dāng)前域名下獲取2345中的寬度，然后通過(guò)js設(shè)置iframe內(nèi)容的高度，這樣看起來(lái)是一個(gè)整體，核心內(nèi)容如下

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寫(xiě)在前面，iframe在后面，通過(guò)onload加載的時(shí)候就觸發(fā)，完美融合。