javascript動態(tài)的改變IFrame的高度實現(xiàn)自動伸展
更新時間:2013年10月12日 16:57:07 作者:
動態(tài)的改變IFrame的高度,實現(xiàn)IFrame自動伸展,父頁面也自動神縮,實現(xiàn)原理很簡單就是在IFrame子頁面一加載的時候,調(diào)用父IFrame對象,改變其高度,感興趣的朋友可以了解下
動態(tài)的改變IFrame的高度,實現(xiàn)IFrame自動伸展,父頁面也自動神縮
原理: 在IFrame子頁面一加載的時候,調(diào)用父IFrame對象,改變其高度
具體實現(xiàn)一:
1、在IFrame的具體頁面(就是子頁面),添加JavaScript
<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //彈出當前頁面的高度
var obj = parent.document.getElementById("childFrame"); //取得父頁面IFrame對象
//alert(obj.height); //彈出父頁面中IFrame中設置的高度
obj.height = this.document.body.scrollHeight; //調(diào)整父頁面中IFrame的高度為此頁面的高度
}
</script>
2、在IFrame的具體頁面(就是子頁面)的body中,添加onload事件
<body onload="IFrameResize()">
3、為父頁面的IFrame標簽添加ID,即上面第一步,方法體中的第2行所寫到的childFrame
<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)二:
//動態(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為
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>
原理: 在IFrame子頁面一加載的時候,調(diào)用父IFrame對象,改變其高度
具體實現(xiàn)一:
1、在IFrame的具體頁面(就是子頁面),添加JavaScript
復制代碼 代碼如下:
<script>
function IFrameResize(){
//alert(this.document.body.scrollHeight); //彈出當前頁面的高度
var obj = parent.document.getElementById("childFrame"); //取得父頁面IFrame對象
//alert(obj.height); //彈出父頁面中IFrame中設置的高度
obj.height = this.document.body.scrollHeight; //調(diào)整父頁面中IFrame的高度為此頁面的高度
}
</script>
2、在IFrame的具體頁面(就是子頁面)的body中,添加onload事件
復制代碼 代碼如下:
<body onload="IFrameResize()">
3、為父頁面的IFrame標簽添加ID,即上面第一步,方法體中的第2行所寫到的childFrame
復制代碼 代碼如下:
<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)二:
復制代碼 代碼如下:
//動態(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為
復制代碼 代碼如下:
<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>
您可能感興趣的文章:
- JavaScript動態(tài)改變表格單元格內(nèi)容的方法
- javascript使用switch case實現(xiàn)動態(tài)改變超級鏈接文字及地址
- JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
- JavaScript修改css樣式style動態(tài)改變元素樣式
- javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- javascript動態(tài)改變img的src屬性圖片不顯示的解決方法
- JavaScript 動態(tài)改變圖片大小
- javascript 動態(tài)改變層的Z-INDEX的代碼style.zIndex
- javascript實現(xiàn)動態(tài)改變層大小的方法
相關文章
JSON.stringify轉(zhuǎn)換JSON時日期時間不準確的解決方法
這篇文章主要介紹了JSON.stringify轉(zhuǎn)換JSON時日期時間不準確的解決方法,即JSON數(shù)據(jù)中包含日期對象時,在轉(zhuǎn)換時會轉(zhuǎn)換成國際時間,而不是中國的時區(qū),需要的朋友可以參考下2014-08-08layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法
今天小編就為大家分享一篇layui table動態(tài)表頭 改變表格頭部 重新加載表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)(2)
這篇文章主要介紹了JavaScript限制在客戶區(qū)可見范圍的拖拽,解決scrollLeft和scrollTop的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05javascript設計模式 – 迭代器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 迭代器模式原理與用法,結(jié)合實例形式分析了javascript迭代器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04js中匿名函數(shù)的創(chuàng)建與調(diào)用方法分析
這篇文章主要介紹了js中匿名函數(shù)的創(chuàng)建與調(diào)用方法,詳細分析了匿名函數(shù)的原理與用法,以及閉包的原理分析,非常具有實用價值,需要的朋友可以參考下2014-12-12js實現(xiàn)input框文字動態(tài)變換顯示效果
這篇文章主要介紹了js實現(xiàn)input框文字動態(tài)變換顯示效果,涉及javascript隨機字符串與中文的動態(tài)切換顯示效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié))
這篇文章主要介紹了Weex開發(fā)之WEEX-EROS開發(fā)踩坑(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法分析
這篇文章主要介紹了JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法,結(jié)合實例形式分析了javascript采用遞歸算法實現(xiàn)網(wǎng)頁版計算器的步驟與相關操作技巧,需要的朋友可以參考下2017-12-12