深入解析contentWindow, contentDocument
生活永遠(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ā),完美融合。
相關(guān)文章
判斷js中各種數(shù)據(jù)的類型方法之typeof與0bject.prototype.toString講解
提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大寫(xiě),像JSON這種甚至都是大寫(xiě),所以,大家判斷的時(shí)候可以都轉(zhuǎn)換成小寫(xiě),以防出錯(cuò)2013-11-11HTML5實(shí)現(xiàn)留言和回復(fù)頁(yè)面樣式
這篇文章主要介紹了用HTML5如何實(shí)現(xiàn)留言和回復(fù)樣式,需要的朋友可以參考下2015-07-07深入理解JavaScript系列(22):S.O.L.I.D五大原則之依賴倒置原則DIP詳解
這篇文章主要介紹了深入理解JavaScript系列(22):S.O.L.I.D五大原則之依賴倒置原則DIP詳解,本文講解了DIP and JavaScript、何時(shí)依賴注入等內(nèi)容,需要的朋友可以參考下2015-03-03JavaScript設(shè)計(jì)模式開(kāi)發(fā)中組合模式的使用教程
組合模式可以理解為樹(shù)狀結(jié)構(gòu),因此組合模式適合對(duì)大批對(duì)象的操作,特別是層次結(jié)構(gòu)分明的,下面我們就來(lái)看看號(hào)稱面向?qū)ο蟮腏avaScript設(shè)計(jì)模式開(kāi)發(fā)中組合模式的使用教程2016-05-05JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件
有時(shí)會(huì)使用一些改變心情方面的想法,比如JS函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加CSS樣式表文件,這樣就可以做到隨機(jī)加載心情文件,需要的朋友可以了解下2012-12-12