動態(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)文章
對于學(xué)前端的小伙伴來說，吸引你們?nèi)肟拥拇蠖际且恍╈趴岬捻撁?。本文將用JavaScript編寫一個酷炫的3D圖片演示效果，感興趣的可以了解一下2022-03-03
檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧
這篇文章主要介紹了檢測一個函數(shù)是否是JavaScript原生函數(shù)的小技巧,本文給出了兩種檢測方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了前端下載文件時如何后端返回的文件流一些常見方法,包括使用Blob和URL.createObjectURL創(chuàng)建下載鏈接,以及處理帶有Content-Disposition的下載,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
JS中call/apply、arguments、undefined/null方法詳解
這篇文章主要介紹了JS中call/apply、arguments、undefined/null方法詳解的相關(guān)資料,需要的朋友可以參考下2016-02-02
JS數(shù)組索引檢測中的數(shù)據(jù)類型問題詳解
這篇文章主要給大家介紹了關(guān)于JS數(shù)組索引檢測中的數(shù)據(jù)類型問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Bootstrap Modal對話框如何在關(guān)閉時觸發(fā)事件
這篇文章主要為大家詳細(xì)介紹了Bootstrap Modal對話框如何在關(guān)閉時觸發(fā)事件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了微信小程序自定義導(dǎo)航隱藏和顯示功能,需要的朋友可以參考下2017-06-06
正則表達(dá)式是javascript操作字符串的一個重要組成部分，然而，在ES6中，隨著字符串操作的變更， ES6也對正則表達(dá)式進(jìn)行了一些更新。本文將詳細(xì)介紹ES6正則表達(dá)式擴(kuò)展2017-07-07
js中常常用到innerHTML,其作用就是獲取到標(biāo)簽里面的內(nèi)容,同時也可以為標(biāo)簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下2022-10-10
單例模式（Singleton Pattern）是一種創(chuàng)建型設(shè)計模式,確保一個類只有一個實例,并提供全局訪問該實例的方式,這在某些場景下非常有用,例如配置管理類、日志類或數(shù)據(jù)庫連接管理類,需要的朋友可以參考下2024-08-08