javascript 裝載iframe子頁面,自適應(yīng)高度
更新時間:2009年03月20日 23:14:55 作者:
javascript 裝載iframe子頁面,自適應(yīng)高度
假設(shè)主頁面有一個div,里面放置一個iframe
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe>
</div>
3個菜單鏈接,分別在iframe加載 1.html、2.html、3.html 三個頁面。
3個子頁面分別在自己頁面加載完window.onload執(zhí)行
function aa(){
var newHeight = document.body.scrollHeight + 20 + "px";
window.parent.document.getElementById("frameBox").style.height = newHeight;
//以上firefox通過,但是ie6必須加上下面這句,不然iframe高度是改了,但是可見區(qū)域沒有改
window.parent.document.getElementById("frameWin").style.height = newHeight;
}
以下方法只需要把代碼放在主頁面:
頁面代碼:
<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腳本(加在主頁面):
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;
}
復(fù)制代碼 代碼如下:
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></iframe>
</div>
3個菜單鏈接,分別在iframe加載 1.html、2.html、3.html 三個頁面。
3個子頁面分別在自己頁面加載完window.onload執(zhí)行
復(fù)制代碼 代碼如下:
function aa(){
var newHeight = document.body.scrollHeight + 20 + "px";
window.parent.document.getElementById("frameBox").style.height = newHeight;
//以上firefox通過,但是ie6必須加上下面這句,不然iframe高度是改了,但是可見區(qū)域沒有改
window.parent.document.getElementById("frameWin").style.height = newHeight;
}
以下方法只需要把代碼放在主頁面:
頁面代碼:
復(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腳本(加在主頁面):
復(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)文章
用JS將搜索的關(guān)鍵字高亮顯示實現(xiàn)代碼
這篇文章介紹了JS將搜索的關(guān)鍵字高亮顯示實現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11JavaScript中style.left與offsetLeft的使用及區(qū)別詳解
這篇文章主要介紹了JavaScript中style.left與offsetLeft的使用及區(qū)別詳解的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06JavaScript利用正則表達式來禁止鍵盤輸入數(shù)字
本文主要介紹了JavaScript利用正則表達式來禁止鍵盤輸入數(shù)字,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
這篇文章主要介紹了原生JS實現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下2017-06-06javascript 用函數(shù)實現(xiàn)繼承詳解
下面小編就為大家?guī)硪黄猨avascript 用函數(shù)實現(xiàn)繼承詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05JS中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例
下面小編就為大家?guī)硪黄狫S中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06