快捷導(dǎo)航

javascript 裝載iframe子頁(yè)面，自適應(yīng)高度

更新時(shí)間：2009年03月20日 23:14:55 作者：

假設(shè)主頁(yè)面有一個(gè)div，里面放置一個(gè)iframe

<div id="frameBox"> 
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe> 
</div> 

3個(gè)菜單鏈接，分別在iframe加載 1.html、2.html、3.html 三個(gè)頁(yè)面。

3個(gè)子頁(yè)面分別在自己頁(yè)面加載完window.onload執(zhí)行

復(fù)制代碼代碼如下:

function aa(){ 
var newHeight = document.body.scrollHeight + 20 + "px"; 
window.parent.document.getElementById("frameBox").style.height = newHeight; 
//以上firefox通過(guò)，但是ie6必須加上下面這句，不然iframe高度是改了，但是可見(jiàn)區(qū)域沒(méi)有改 
window.parent.document.getElementById("frameWin").style.height = newHeight; 
} 

以下方法只需要把代碼放在主頁(yè)面：
頁(yè)面代碼：

復(fù)制代碼代碼如下:

<div style="border:1px solid #7e99c6" id="frameBox"> 
<iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe> 
</div> 

js腳本（加在主頁(yè)面）：

復(fù)制代碼代碼如下:

function test2(){ 
var frameWin = document.getElementById("frameWin"); 
var frameBox = document.getElementById("frameBox"); 
var newHeight; 
if (frameWin.Document){ 
newHeight = frameWin.Document.body.scrollHeight + 20 + "px"; 
}else{ 
newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px"; 
} 
frameWin.style.height = newHeight; 
frameBox.style.height = newHeight; 
} 

您可能感興趣的文章:

相關(guān)文章

OfflineSave離線(xiàn)保存代碼再次發(fā)布使用說(shuō)明
OfflineSave離線(xiàn)保存代碼再次發(fā)布使用說(shuō)明...
2007-05-05
常見(jiàn)的瀏覽器存儲(chǔ)方式（cookie、localStorage、sessionStorage）
今天我們從前端的角度了解一下瀏覽器存儲(chǔ)，我們常見(jiàn)且常用的存儲(chǔ)方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-05-05
uniapp調(diào)用百度語(yǔ)音實(shí)現(xiàn)錄音轉(zhuǎn)文字功能
這篇文章主要介紹了uniapp通過(guò)調(diào)用百度語(yǔ)音，實(shí)現(xiàn)錄音轉(zhuǎn)文字的功能。文中的示例代碼對(duì)我們學(xué)習(xí)或工作有一定的幫助，感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下
2021-12-12
javascript圖片預(yù)加載實(shí)例分析
這篇文章主要介紹了javascript圖片預(yù)加載的方法,實(shí)例分析了javascript實(shí)現(xiàn)圖片預(yù)加載的方法與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
Textarea與懶惰渲染實(shí)現(xiàn)代碼
2008年有啊第一次性能優(yōu)化時(shí)，我們?cè)胻extarea來(lái)存貯需要懶惰渲染的節(jié)點(diǎn)
2012-01-01
使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-01-01
JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法
這篇文章主要介紹了JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-05-05
簡(jiǎn)單了解JavaScript操作XPath的一些基本方法
XPath構(gòu)建于XML之上,以表示路徑的方式來(lái)確定XML中元素位置,事實(shí)上并不是太常用,這里我們來(lái)簡(jiǎn)單了解JavaScript操作XPath的一些基本方法
2016-06-06
使用JS實(shí)現(xiàn)任意位置縮放圖片功能
本文將用一個(gè)簡(jiǎn)單的例子詳細(xì)講解如何用原生JS一步步實(shí)現(xiàn)完整的任意位置縮放圖片功能,無(wú)任何第三方依賴(lài),指針事件進(jìn)行多端統(tǒng)一的事件監(jiān)聽(tīng),干貨滿(mǎn)滿(mǎn),需要的朋友可以參考下
2024-04-04
微信小程序中顯示倒計(jì)時(shí)代碼實(shí)例
這篇文章主要介紹了微信小程序中顯示倒計(jì)時(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05