如何使用Javascript删除嵌套帧和iframes的滚动条

Question

我正在开发web应用程序，它包含不同数量的嵌套框架和iframes。当前，当网页呈现浏览器时，它们将呈现滚动条。有时计数是4-5滚动条在一页，这看起来很难看。所以我想通过Javascript删除这些滚动条。

要理解这个问题，请参阅下面的框架/iframe层次结构的网页示例。

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

My方法:从根文档开始，搜索页面中的所有框架/iframes，并将这些框架节点放入中，并添加名为level的变量。完成后，我将在级别上对数组进行排序。因此，在此活动数组之后，将显示为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元素开始，得到帧的滚动高度，并将其设置为框架的高度属性。

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

对数组中的每个帧执行相同的过程。我在这里的假设是，如果最内部帧的高度发生变化，则其父节点滚动的高度必须更改为真正的滚动高度。例如，设置Frame5和Frame4高度之后。当我们获取Frame3的滚动高度时，必须是Frmae5高度+Frame4 4高度。但现在它没有反映出真正的滚动高度。我不知道这里出了什么问题。当我们设置Frame5和框架4高度时，Dom会立即刷新吗？我用错了财产吗？因为我验证了所有其他礼仪也使用脚本调试器，如clientHeight，offsetHeight，但没有一个等同于Frame5 height+ Frame4高度。

选项2例如，获取Frame5和Frame4的滚动高度，并将其设置为Frame3，还添加Frame3和Frame2的高度，并将其设置为Frame1。

选项二现在起作用了，但是它仍然有一些缺点，所有的帧都必须按等级顺序排列，不能相互平行。

另外，当我将滚动高度设置为高度时，滚动条仍然会出现，我必须在滚动高度中添加一些常量，比如15。所以实际的代码就像

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

我不知道这15是什么。是框架边界吗？我能用帧的任何性质得到这个常数吗？

我更喜欢选项1，但不知道为什么这不起作用。如果有其他办法解决这个问题，请提出建议。

Answer 1

我也遇到了同样的问题，在我将所有帧转换为iframes之后，下面的函数(使用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);
        }
    }
}

Answer 2

为什么不直接用

html,body{overflow:hidden}

在CSS中的iframes？