Question

我正在处理包含不同数量的嵌套框架和iframe的Web应用程序。目前，当网页呈现浏览器时，滚动条会对其进行滚动。有时count在页面中是4-5个滚动条，看起来非常难看。所以我想通过Javascript删除这些滚动条。

要了解此问题，请参阅以下带有框架/ iframe层次结构的网页示例。

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

我的方法： 从根文档开始，从页面中搜索所有帧/ iframe，并将这些帧节点放在Array中，并使用名为level的其他变量。完成此操作后，我将在阵列上对数组进行排序。所以在这个活动数组之后会看起来像.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个元素开始，得到框架的滚动高度，并将其设置为Frame的高度属性。

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

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

选项＃2 由于上面的方法不能正常工作，我采用了另一种手动添加前一级帧高度的方法，并将其设置为下一级别的父节点。例如，获取Frame5和Frame4的滚动高度，并将其设置为Frame3。同时添加Frame3和Frame2的高度并将其设置为Frame1。

选项二现在正在运行，但它仍有一些缺点，例如所有帧必须按层次顺序排列，并且不能相互并行。

此外，当我将scrollheight设置为Frame to height时，滚动条仍然按原样显示，我必须在滚动高度上添加一些常量，如15。所以实际代码就像

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

我不知道这15是什么。它是一个边界框架吗？我可以使用框架的任何属性来获得此常量吗？

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

Answer 1

为什么不使用

html,body{overflow:hidden}

在iframes的CSS中

？

Answer 2

我遇到了同样的问题，在将所有帧转换为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);
        }
    }
}

如何使用Javascript删除嵌套框架和iframe的滚动条

2 个答案: