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