2

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

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

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

我的方法： 从根文档开始，从页面中搜索所有框架/iframe，并将这些框架节点放入数组中，并带有称为 level 的附加变量。完成此操作后，我正在对数组进行排序。所以这个活动数组之后会是什么样子。下面

     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 高度。但现在它并没有反映真正的滚动高度。我不确定这里有什么问题。当我们设置 Frame5 和 Frame 4 高度时，Dom 会立即刷新吗？. 我使用了错误的属性吗？因为我还使用脚本调试器（如 clientHeight、offsetHeight）验证了所有其他属性，但没有一个等同于 Frame5 高度+ Frame4 高度。

选项#2 由于上述方法无法正常工作，我采用另一种方法手动添加先前级别的框架高度并将其设置为下一级的父节点。例如获取Frame5 和Frame4 的滚动高度并将其设置为Frame3 另外添加Frame3 和Frame2 的高度并将其设置为Frame1。

选项二现在正在工作，但它仍然有一些缺点，例如所有帧必须按层次顺序排列，并且不能彼此平行。

此外，当我将 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 回答