動(dòng)態(tài)的改變IFrame的高度實(shí)現(xiàn)IFrame自動(dòng)伸展適應(yīng)高度
更新時(shí)間：2012年12月28日 14:25:35 作者：
動(dòng)態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動(dòng)伸展，父頁(yè)面也自動(dòng)神縮原理： 在IFrame子頁(yè)面一加載的時(shí)候，調(diào)用父IFrame對(duì)象，改變其高度
動(dòng)態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動(dòng)伸展，父頁(yè)面也自動(dòng)神縮
原理： 在IFrame子頁(yè)面一加載的時(shí)候，調(diào)用父IFrame對(duì)象，改變其高度
具體實(shí)現(xiàn)一:
1、在IFrame的具體頁(yè)面(就是子頁(yè)面)，添加JavaScript
復(fù)制代碼 代碼如下:
<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //彈出當(dāng)前頁(yè)面的高度
var obj = parent.document.getElementById("childFrame"); //取得父頁(yè)面IFrame對(duì)象
//alert(obj.height); //彈出父頁(yè)面中IFrame中設(shè)置的高度
obj.height = this.document.body.scrollHeight; //調(diào)整父頁(yè)面中IFrame的高度為此頁(yè)面的高度
}
</script>
2、在IFrame的具體頁(yè)面(就是子頁(yè)面)的body中，添加onload事件
復(fù)制代碼 代碼如下:
<body onload="IFrameResize()">
3、為父頁(yè)面的IFrame標(biāo)簽添加ID，即上面第一步，方法體中的第2行所寫(xiě)到的childFrame
復(fù)制代碼 代碼如下:
<IFRAME border=0 marginWidth=0
frameSpacing=0 marginHeight=0
src="frame1.jsp" frameBorder=0
noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>
具體實(shí)現(xiàn)二:
復(fù)制代碼 代碼如下:
//動(dòng)態(tài)改變父類(lèi)iframe的高度
//iframe頁(yè)面調(diào)用的js
$(function(){
//取到窗口的高度
var winH = $(window).height();
//取到頁(yè)面的高度
var bodyH = $(document).height();
if(bodyH > winH){
window.parent.document.getElementById("mainFrame").height=bodyH;
}else{
window.parent.document.getElementById("mainFrame").height=winH;
}
});
父頁(yè)面的iframe為
復(fù)制代碼 代碼如下:
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>
相關(guān)文章
JS實(shí)現(xiàn)超簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)超簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
本文主要介紹了js預(yù)加載和延時(shí)加載2種技術(shù)，簡(jiǎn)單分析了他們的實(shí)現(xiàn)方式和優(yōu)缺點(diǎn)，非常的實(shí)用，有需要的朋友參考下2014-09-09
js+css簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚效果
這篇文章主要介紹了js+css簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-12-12
JavaScript實(shí)現(xiàn)扯網(wǎng)動(dòng)畫(huà)效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語(yǔ)言實(shí)現(xiàn)扯網(wǎng)動(dòng)畫(huà)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定的幫助，需要的可以參考一下2022-06-06
js中select選擇器的change事件處理函數(shù)詳解
Js操作Select是很常見(jiàn)的,也是比較實(shí)用的,下面這篇文章主要給大家介紹了關(guān)于js中select選擇器的change事件處理函數(shù)的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼,需要的朋友可以參考下2023-06-06
JavaScript監(jiān)聽(tīng)文本框回車(chē)事件并過(guò)濾文本框空格的方法
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)文本框回車(chē)事件并過(guò)濾文本框空格的方法,涉及javascript操作文本框獲取、清空及刪除空格的技巧,需要的朋友可以參考下2015-04-04
plugin是插件的意思,通常是用于對(duì)某個(gè)現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展,下面這篇文章主要給大家介紹了關(guān)于webpack?Plugin的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
在開(kāi)發(fā)中，數(shù)組的使用場(chǎng)景非常多，平日中也涉及到很多數(shù)組的api/相關(guān)操作，一直也沒(méi)有對(duì)這塊內(nèi)容進(jìn)行一塊整理總結(jié)，很多時(shí)候就算用過(guò)幾次這個(gè)api，在開(kāi)發(fā)中也很容易忘記，還是要谷歌一下2018-06-06
這篇文章主要介紹了JS仿hao123導(dǎo)航頁(yè)面圖片輪播效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-09-09
本文對(duì)JavaScript中對(duì)象的本質(zhì)、對(duì)象與類(lèi)的關(guān)系、對(duì)象與引用類(lèi)型的關(guān)系;對(duì)象屬性如何進(jìn)行分類(lèi);屬性中特性進(jìn)行介紹。感興趣的朋友可以看下2016-12-12