2013-01-05 50 views
2

我正在使用包含不同數量的嵌套框架和iframe的web應用程序。 當前網頁呈現瀏覽器呈現滾動條對他們。有時候在一個看起來很醜的頁面中,count是4-5滾動條。所以我想通過Javascript刪除這些滾動條。如何使用Javascript刪除嵌套框架和iframe的滾動條

要了解問題,請參閱下面的框架/ iframe層次結構的網頁示例。

Frame1 
     --Frame2 
     --Frame3 
       --Frame4 
       --Frame5 

我的方法:從根文件 啓動,並從網頁搜索所有幀/ I幀,並把這些框架節點陣列與附加變量叫做水平。 完成後,我排序在水平上的數組。所以這個活動後陣列看起來like.Below

 0> Frame5 node, level=3 
    1> Frame4 node, level=3 
    2> Frame3 node, level=2 
    3> Frame2 node, level=2 
    4> Frame1 node, level=1 

在此之後,我考慮兩種選項刪除滾動條

選項#1: 從數組第0個元素開始,並獲得scrollHeight屬性框架並將其設置爲Frame的高度屬性。

var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight; 
Frame5.style.height =frameScrollHeight; 

對數組中的每一幀做相同的過程。 這裏我的假設是,如果最內層框架高度發生變化,其父節點滾動高度必須更改爲真正的滾動高度。 例如設置Frame5和Frame4高度後。當我們獲取Frame3的scrollheight時,它必須是Frmae5高度+ Frame4高度。但現在它並沒有反映出真正的旋轉高度。 我不知道這裏有什麼問題。當我們設置Frame5和Frame 4的高度時,Dom會立即刷新? 。 我使用錯誤的屬性?因爲我使用腳本調試器(如clientHeight,offsetHeight)驗證了所有其他屬性,但沒有任何一個等效於Frame5 height + Frame4 height。

選項#2 如上方法工作不正常我把添加先前的水平的另一種方法手動幀高度並將其設置爲在下一級別父節點。 例如獲取Frame5和Frame4的scrollheight並將其設置爲Frame3同時添加Frame3和Frame2的高度並將其設置爲Frame1。

選項二現在正在工作,但它仍然有一些缺點,就像所有的框架必須按照等級順序排列,並且不能相互平行。

此外,當我設置scrollheight作爲高度框架滾動條仍然顯示爲它,我必須添加一些常數像15到scrollheight。所以實際的代碼就像

var frameScrollHeight=Frame5.contentWindow.document.body.scrollHeight+15; 
Frame5.style.height =frameScrollHeight; 

我不知道這15是什麼。它是一個框架邊界嗎?我可以使用任何框架屬性來獲得這個常量嗎?

我更喜歡選項1,但不知道爲什麼這不起作用。 如果還有其他方法可以解決這個問題,請建議。

+0

爲什麼你甚至會考慮在2013年使用框架? – charlietfl

+0

這是非常大的遺留應用程序,超過600個經典的asp頁面,客戶端不想立即升級它。順便說一句,這個應用程序使用微軟公司在過去14年發佈的每種Web技術。從傳統的Asp到Asp.net 4.0,從com,com到WCF服務。 – Sachin

+0

客戶端需要醒悟到HTML5中不支持框架的現實http://www.w3.org/TR/html5-diff/#obsolete-elements – charlietfl

回答

0

我有同樣的問題,並且在將所有幀轉換爲iframe後,下列函數(使用jquery)爲我工作。該功能將調整每一幀,這樣就沒有必要對滾動條:

var resizeFramesSoAllContentVisible = function (win) { 
    for (var i = 0; i < win.frames.length; i++) { 
     var frame = win.frames[i]; 
     var contentWindow = frame.contentWindow ? frame.contentWindow : frame.window; 
     resizeFramesSoAllContentVisible(contentWindow); 
    } 

    if (win.frameElement) { 
     var myFrameOuterHeight = $(win.frameElement).height(); 
     var myFrameInnerHeight = $(win.document).height(); 
     var myFrameOuterWidth = $(win.frameElement).width(); 
     var myFrameInnerWidth = $(win.document).width(); 

     if (myFrameOuterHeight != myFrameInnerHeight) { 
      $(win.frameElement).height(myFrameInnerHeight); 
     } 
     if (myFrameOuterWidth != myFrameInnerWidth) { 
      $(win.frameElement).width(myFrameInnerWidth); 
     } 
    } 
} 
1

爲什麼不直接使用

html,body{overflow:hidden} 

在CSS的I幀?