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

How to remove scrollbar of nested frames and iframes using Javascript

本文关键字：iframe 滚动条 框架 嵌套 何使用 Javascript 删除      更新时间：2023-09-26

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

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

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

我的方法:从根文档开始，从页面中搜索所有帧/iframe，并将这些帧节点与附加变量level一起放入Array中。完成后，我在水平上对数组进行排序。这个活动数组之后会是这样的。在

     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的scrollheight，并将其设置为frame的height属性。

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

对数组中的每一帧执行相同的过程。我在这里的假设是，如果最内层框架的高度改变，它的父节点滚动高度必须改变为真正的滚动高度。在设置Frame5和Frame4高度之后。当我们获取Frame3的滚动高度时，它必须是frame5的高度+Frame4的高度。但现在它没有反映真正的滚动高度。我不确定这里出了什么问题。当我们设置Frame5和frame4的高度时，Dom会立即刷新吗?．我是否使用了错误的属性?因为我验证了所有其他属性也使用脚本调试器，如clientHeight,offsetHeight，但没有一个相当于Frame5高度+ Frame4高度。

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

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

同样，当我将scrollheight设置为Frame的高度时，滚动条仍然会出现，我必须添加一些常量，如15到scrollheight。实际代码是

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

我不知道这15是什么。它是一个框架边界吗?我能用坐标系的任何性质得到这个常数吗?

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

为什么不直接使用

html,body{overflow:hidden}

在CSS中的iframes?

我有同样的问题，下面的函数(使用jquery)为我工作后，我将所有帧转换为iframe。这个函数将调整每一帧的大小，这样就不需要滚动条了:

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);
        }
    }
}
相关文章：