2

ネストされたフレームとiframeの数が異なるWebアプリケーションに取り組んでいます。現在、Webページがレンダリングされると、ブラウザはそれらに対してスクロールバーをレンダリングします。時々カウントは非常に醜いページの4-5スクロールバーです。そこで、Javascriptを使用してこれらのスクロールバーを削除したいと思います。

問題を理解するには、以下のフレーム/iframe階層のWebページの例を参照してください。

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

私のアプローチ： ルートドキュメントから開始し、ページからすべてのフレーム/ iframeを検索し、これらのフレームノードをレベルと呼ばれる追加の変数を使用して配列に配置します。これが完了した後、私はレベルで配列をソートしています。したがって、このアクティビティの後、配列は次のようになります。

     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

この後、スクロールバーを削除する2つのオプションを検討しています

オプション＃1：配列の0番目の要素から開始し、フレームのscrollheightを取得して、Frameのheightプロパティに設定します。

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

配列内のすべてのフレームに対して同じ手順を実行します。ここでの私の仮定は、最も内側のフレームの高さが変更された場合、その親ノードのスクロールの高さを真のスクロールの高さに変更する必要があるということです。たとえば、Frame5とFrame4の高さを設定した後。Frame3のscrollheightをフェッチするときは、Frmae5 height +Frame4heightである必要があります。しかし、今では真のスクロール高さを反映していません。ここで何が悪いのかわかりません。フレーム5とフレーム4の高さを設定すると、Domはすぐに更新されますか？。間違ったプロパティを使用していますか？clientHeight、offsetHeightなどのスクリプトデバッガーを使用して他のすべてのプロパティを検証しましたが、Frame5 height +Frame4heightに相当するものはありませんでした。

オプション＃2 上記のアプローチが正しく機能しないため、前のレベルのフレームの高さを手動で追加して、次のレベルの親ノードに設定するという別のアプローチを採用しました。たとえば、Frame5とFrame4のscrollheightを取得し、Frame3に設定します。Frame3とFrame2の高さも追加し、Frame1に設定します。

オプション2は現在機能していますが、すべてのフレームが階層的な順序である必要があり、互いに並列であってはならないなど、いくつかの欠点があります。

また、scrollheightを高さとしてFrameに設定すると、スクロールバーはそのまま表示され、scrollheightに15などの定数を追加する必要があります。したがって、実際のコードは次のようになります

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

この15が何であるかわかりません。フレームボーダーですか？フレームの任意のプロパティを使用してこの定数を取得できますか？

私はオプション1を好みますが、なぜこれが機能しないのかわかりません。この問題を解決する他の方法がある場合は、提案してください。

4

2 に答える 2

1

使用しない理由

html,body{overflow:hidden}

iframe の CSS で?

于 2013-02-02T03:25:49.907 に答える
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);
        }
    }
}
于 2013-02-02T03:11:59.687 に答える