完全搞定iframe（框架）里的滾動條

本文轉載自查看原文 2012-06-04 16:38 21679 HTML

iframe初始滾動條位置:

——————————————————————————————————————

滾動條始終在最下端:
window.onload=function (){
document.documentElement.scrollTop=parseInt(document.body.offsetHeight)-parseInt(document.documentElement.offsetHeight)+100;
}
/*上面的加100是因為取offsetHeight的值不是很准,所以自己改到准為止*/

滾動條始終在最上端:
window.onload=function(){
document.documentElement.scrollTop=0;
}

————————————————————————————————————————————

ASP頁面的,在你iframe所引用的頁面加

在你的文件前面加上
<%
response.redirect "#top"
%>
然后在要滾動的地方加上代碼:
<div align="center"><a name="top"></a>
</div>

===============================================

說明：
1、本文參考了網絡上大量資料，本人在此深表感謝！
2、本文假設讀者，有一定的HTML、CSS、JS基礎。
3、本文討論的目標是，通過A頁面里的<iframe>標記引用B網頁之后，在A頁面上出現滾動條這種情況的幾種解決辦法。
4、因為篇幅的關系，文章被分成了兩部分。通常情況下，（一）就能解決你的問題，（二）將會深入探討這個問題和相關的解決方案。
5、如果你覺得我啰嗦，請直接從方案一開始讀起。
6、文檔的附件里有各種解決方案的示例代碼供大家下載，我盡量把每一種方案都放在一個獨立的文件夾里面。（這是一個asp的case，里面可能會包含一些asp方面的代碼。）
7、解決問題的方法有兩種：CSS和JS，本人傾向於使用JS這種方法。
8、實際上遇到這種問題的時候，有兩種情況：i)在A頁面上iframe的大小固定，不允許延展（拉寬或拉長），但是B頁面的內容比iframe長（也有寬的時候，本人實際工作中遇到長的時候比較多，本文也只討論長的情況，寬的情況以此類推，把相應的height換成width就行了。ii)A頁面上可以不限制iframe的長度，B頁面的長度超過iframe的長度，B頁面可能延展iframe的長度，通常B頁面也會把A頁面的長度自動給延展了。
i)這種情況通常是用在網站首頁、欄目首頁這些地方，出現的次數比較多。
ii)這種情況出現的比較少，我在使用網易郵箱“記事本”時發現網易郵箱的這種情況，研究之后用在了一個在線銷售網站的產品評論上了(http://www.pplily.com/product_view.asp?id=1380)。評論的列表，放在<iframe>里面，根據一評論的多少，<iframe>的長度會跟着發生變化，整個網頁的長度也要變化。
9、示例代碼下載：
http://www.jqs0086.com/ncp/images/完全搞定iframe的滾動條！.rar

我今天遇到的情況是，i)和ii)這兩種情況全都“趕上了”。研究了好一會，總算把相關的問題都解決了，現在總結一下。

現在我說明一下面的將要使用的三個文件：
1、A文件，網站首頁，中間有一個width:450和heidth:260的<iframe>。 iframe的ID是SellMoney 指向的文件就是B。
A文件部分代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>::::: 鼎天網游 :::::-收貨列表</TITLE>

<STYLE type=text/css>...
BODY {...}{
    FONT-SIZE: 12px;
    /**//*width: 430px;*/
    margin:0px;
    padding:0px;
}
HTML,BODY{...}{
/**//*    overflow-x:hidden;
*/
}
TD {...}{
    FONT-SIZE: 12px;
}
TH {...}{
    FONT-SIZE: 12px;
}
</STYLE>

</HEAD>
<BODY bgColor="transparent">
<TABLE width="100%" border="0" align="center" cellPadding="0" cellSpacing="1" id="listtable" valign="top" >
<TR>
    <TD>
    
    </TD>
</TR>

</TABLE>
<TABLE width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
    <TD>
    
    </TD>
</TR>
</TABLE>
</BODY>
</HTML>
<script language="JavaScript" type="text/javascript">...

同時我也在嘗試用js來解決問題。
開始的時候想給document.documentElement.clientWidth 付值但是沒有成功。這個屬性是只讀的。
其后查看“蘇州小雨”的《DHTML手冊》，驗證了上面的猜測。
最后，查看以前編寫的其它代碼，發現document.body.style.width這個是讀/寫屬性的，嘗試用document.body.style.width來付值，結果終於成功了。

*/
            //SellMoney.style.height= 450;
            //alert(pageHeight);
        }catch(e)...{
            //alert(e);
            window.status+=e;
        }
    }
}

window.onload=expandWindow;
</script>
3、C文件，中間中間有一個width:450和heidth:無限的<iframe>。 iframe的ID是SellGold指向的文件也是B。
【注意 A文件iframe的ID是SellMoney ，C文件是SellGold，】
C文件的作用就是把B“包”起來，給B加上導航、登錄框什么的。實際上也可以把B文件的代碼直接加到C里面，但我現在A文件和C文件都通過iframe引用B，這樣的話，就能偷懶了，而且美其名曰：“代碼重用”。*_^
C文件就是為了說明 ii )情況准備的，沒有后台編程經驗的朋友，可以不關注C文件和ii)這種情況。我也打算把ii)這種情況放到另一篇文章當中進行討論。
C文件部分代碼：

--------------------------------------------------------------------------------

解決方案一：

去掉文件開頭的文檔聲明。
不使用"DOCTYPE "文檔聲明(詳細代碼在下面)的話很容易就過去了。但是不使用文檔聲明，一是代碼不規范，二是不能獲得文檔的高度。下面的代碼執行的結果是pageHeight=160px;，而實際上B文件的高度（長度）是800px左右。

var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);

--------

有關的文檔聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

---------------

解決方案二：
在B文檔的css里定義body的width<437。但是這樣就是固定了，也不太合適。只能用在一個文件里，在另一個文件的iframe 可能寬達500、600，但是B文件卻被擠壓到450，頁面的一邊或者兩條出現大塊的空白。

BODY {...}{
    FONT-SIZE: 12px;
    width: 430px;/**//*就是這里了！*/
    margin:0px;
    padding:0px;
}

解決方案三：
在B文件的CSS中使用overflow。
使用overflow需要注意以下問題：
1、使用overflow之前看看網頁的開頭沒有沒使用文檔聲明，如果使用了文檔聲明，那么必須同時定義HTML和BODY兩個標記。
2、overflow-x和overflow-y分別定義橫向的滾動條和縱向的滾動條，但是它們是IE專有屬性，只有在IE（4.0）以上的版本才能使用。
3、overflow-x: hidden;使用之后，有可能會被縱向的滾動條擋住右邊一部分內容。

HTML,BODY{...}{
overflow-x:hidden;
}
解決方案四：
使用js代碼自動調整B文件的寬度，B文件寬度減小之后，橫向的滾動條自然就消失了。
注意：
1、代碼里有兩段函數都叫expandWindow，你實際上只需要選擇其中一個就行了。這只是同一函數的不同版本，上面的版本，我詳細說明了每行代碼的作用，下面的版本，我簡化了一下，顯得干凈一些。
2、這段代碼，是獨立運行的，與A、C文件無關與A文件里的iframe的ID是什么也無關。這樣的話，就與上面的“B文件部分代碼”不完全一樣了。“B文件部分代碼”需要兼顧A、C兩種情況，所以它的代碼很復雜。
3、通常情況下，只需要下面這段代碼就能解決問題了。推薦您使用下面的代碼！

把下面的代碼放到B文件（或者其它需要只顯示縱向滾動條的網頁）里，A網頁打開之后，調用B網頁，B頁面打開之后，自動執行代碼，橫向滾動條自動消失。
<script language="JavaScript" type="text/javascript">...
//這是一個帶說明的版本，后面還有一個非常干凈的版本。
function expandWindow()...{//這個函數能調整本頁面的寬度
        try...{//使用try{}catch(d){}來捕捉錯誤，我不喜歡狀態欄上那個黃色的驚嘆號。
            var pageWidth = 400;//我們將要把網頁的寬度改成pageWidth大小。為了防止意外，我暫時將寬度設置為一個比較小的數。
            if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
            ...{//看看能不能取得document.documentElement.clientWidth的大小。
                //document.documentElement.clientWidth = pageWidth;
                //我曾經想過直接修改這個屬性，可惜這個屬性是只讀的，不能斌值。
                //alert(document.documentElement.clientWidth);
                pageWidth = document.documentElement.clientWidth;
            }
            else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
            ...{//嘗試獲得document.body.clientWidth。
                //document.body.clientWidth = pageWidth;，這條也不行，同樣是只讀的。
                pageWidth = document.documentElement.clientWidth;
            }
            if(document.body)...{
            //嘗試取得document.body，看看它是不是一個對象。如果它是一個對象object，那么就可以使用.width了。
                if(document.body.style.width<pageWidth)...{//這時再檢查一下，是我為了寫這篇文章臨時添加的。
                    document.body.style.width=pageWidth;//這個width是個讀寫的屬性，修改它，網頁的寬度就變了。
                }
            }
            //alert(pageHeight);//調試程序用的，看看究竟頁面被改成多大。
        }catch(e)...{//捕捉錯誤
            window.status+=e;//把錯誤顯示在狀態欄里
        }
}
//下面是一個簡潔、干凈的版本。
function expandWindow()...{
    var pageWidth = 400;
    if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
    ...{
        pageWidth = document.documentElement.clientWidth;
    }
    else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
    ...{
        pageWidth = document.documentElement.clientWidth;
    }
    if(document.body)...{
        document.body.style.width=pageWidth;
    }
}
window.onload=expandWindow;//當頁面全部打開之后執行函數。
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iframe滾動條設置如何讓iframe框架和主頁面共用一個滾動條(也稱為：iframe高度自適應問題) 如何改變iframe滾動條的樣式？ iframe中的頁面在IE全屏模式下沒有滾動條，正常模式有滾動條 selenium---操作iframe中的滾動條解決多個iframe嵌套而造成的多個滾動條問題 css里設置一個div在頂部固定,不隨滾動條滾動而滾動 DIV滾動條滾動條的設置設置滾動條