動(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)伸展，父頁面也自動(dòng)神縮原理： 在IFrame子頁面一加載的時(shí)候，調(diào)用父IFrame對象，改變其高度
動(dòng)態(tài)的改變IFrame的高度，實(shí)現(xiàn)IFrame自動(dòng)伸展，父頁面也自動(dòng)神縮
原理： 在IFrame子頁面一加載的時(shí)候，調(diào)用父IFrame對象，改變其高度
具體實(shí)現(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>
具體實(shí)現(xiàn)二:
復(fù)制代碼 代碼如下:
//動(dòng)態(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編寫一個(gè)酷炫的3D圖片演示效果，感興趣的可以了解一下2022-03-03
檢測一個(gè)函數(shù)是否是JavaScript原生函數(shù)的小技巧
這篇文章主要介紹了檢測一個(gè)函數(shù)是否是JavaScript原生函數(shù)的小技巧,本文給出了兩種檢測方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了前端下載文件時(shí)如何后端返回的文件流一些常見方法,包括使用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í)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Bootstrap Modal對話框如何在關(guān)閉時(shí)觸發(fā)事件
這篇文章主要為大家詳細(xì)介紹了Bootstrap Modal對話框如何在關(guān)閉時(shí)觸發(fā)事件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了微信小程序自定義導(dǎo)航隱藏和顯示功能,需要的朋友可以參考下2017-06-06
正則表達(dá)式是javascript操作字符串的一個(gè)重要組成部分，然而，在ES6中，隨著字符串操作的變更， ES6也對正則表達(dá)式進(jìn)行了一些更新。本文將詳細(xì)介紹ES6正則表達(dá)式擴(kuò)展2017-07-07
JavaScript中innerHTML使用方法實(shí)例
js中常常用到innerHTML,其作用就是獲取到標(biāo)簽里面的內(nèi)容,同時(shí)也可以為標(biāo)簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下2022-10-10
JavaScript設(shè)計(jì)模式之單例模式詳解
單例模式（Singleton Pattern）是一種創(chuàng)建型設(shè)計(jì)模式,確保一個(gè)類只有一個(gè)實(shí)例,并提供全局訪問該實(shí)例的方式,這在某些場景下非常有用,例如配置管理類、日志類或數(shù)據(jù)庫連接管理類,需要的朋友可以參考下2024-08-08