解決iframe滾動條問題

解決方案一:

去掉文件開頭的文檔聲明。
不使用"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>
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章