添加frameBorder=0 属性时允许调整 HTML 框架的大小吗？

发布于 2024-11-30 07:23:05 字数 589 浏览 2 评论 0原文

在评论开始尖叫“框架是邪恶的”之前，让我添加一个免责声明：“我只是移植一个遗留应用程序，没有时间摆脱框架！” :-)

有一个包含两个框架的框架集。我不喜欢浏览器渲染的默认框架边框（尤其是在 Chrome 和 Firefox 上）。太厚了，感觉很碍眼！所以我想我会使用框架上的 frameborder=0 属性隐藏默认框架边框，并在框架内的内容上添加所需的样式。问题是：添加 frameborder=0 后，框架在 Chrome 和 Chrome 上无法再调整大小。 Safari，而 IE 和Firefox 仍然可以调整它们的大小。这是我的代码：

        <frameset rows="80%,20%" >
            <frame id="frame1" scrolling="auto" frameborder="0" />
            <frame id="frame2" scrolling="auto" frameborder="0" />
        </frameset>

是否有办法覆盖默认的框架边框渲染并仍然保留可调整大小？

原文

Before the comments start screaming "frames are evil", let me add a disclaimer: "I am just porting a legacy application and don't have the time to get rid of frames!" :-)

There's a frameset containing two frames. I don't like the default frame border rendered by the browser (especially on Chrome & Firefox). It's too thick and feels obtrusive! So I thought i'll hide the default frame border using frameborder=0 attribute on the frame and add the desired style on the content inside the frames. The problem is: after adding frameborder=0, the frames are not resizable anymore on Chrome & Safari, whereas IE & Firefox can still resize them. This is my code:

        <frameset rows="80%,20%" >
            <frame id="frame1" scrolling="auto" frameborder="0" />
            <frame id="frame2" scrolling="auto" frameborder="0" />
        </frameset>

Is there anyway to override the default frame border rendering and still retain the resizability?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满栀 2024-12-07 07:23:05

使用普通的 css 设计你的框架，我认为这应该可行，但是框架是邪恶的，没有人使用它们>。>

尝试将其添加到您的框架集页面样式中：

frame {
    border: 1px solid #464646;
    border-collapse: collapse;
}

Style your frames with normal css, I think that should work, but yeah frames are evil and nobody uses them >.>

Try adding this to your frameset page styles:

frame {
    border: 1px solid #464646;
    border-collapse: collapse;
}

回复收藏 0 原文

素染倾城色 2024-12-07 07:23:05

我制作了一个脚本，在文档中放置一个手柄栏，您可以使用它调整 FF 和 chrome 中框架集的大小。不完美但可能有帮助：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">

    function makeFramesetVerticallyResizable(frameSetId) {
        var frameSet = document.getElementById(frameSetId);

        // insert a vertical box called resizeHandle into the righthand document:
        var frameDoc = frameSet.children[1].contentDocument;
        var resizeHandle = frameDoc.createElement("div");
        resizeHandle.style.backgroundColor = "#999999";// remove this line to hide the handle
        resizeHandle.style.position = "fixed";
        resizeHandle.style.width = "100%";
        resizeHandle.style.height = "6px";
        resizeHandle.style.top = "3px"; // put it a little away from the border so firefox can detect dragging to the left
        resizeHandle.style.left = "0px";
        resizeHandle.style.cursor = "n-resize";
        resizeHandle.style.zIndex = 99999;        
        frameDoc.body.insertBefore(resizeHandle, frameDoc.body.firstChild);

        // Drag functions:
        var dragStartScreenY = null;
        resizeHandle.draggable = true;
        resizeHandle.ondragstart = function(event) {
             dragStartScreenY = event.screenY;            
             event.dataTransfer.setData('text/plain', 'dummy');
             event.dataTransfer.effectAllowed = 'move';             
        };
        resizeHandle.ondrag = function(event) {
            if(dragStartScreenY !== null && event.screenY != 0) { // we have a mouse position ?
                var offset = event.screenY - dragStartScreenY;
                var height = frameSet.firstElementChild.offsetHeight;
                var newHeight = height + offset;
                frameSet.rows = "" + newHeight + ",*";
                dragStartScreenY = event.screenY;
            }            
        }        
        resizeHandle.ondragend = resizeHandle.ondrag;// Firefox does not give us the current mouse position during dragging, so resize the frames at the end        
    }



</script>
</head>
    <frameset id="mainFrameSet" rows="80%,20%" border="0" onload="makeFramesetVerticallyResizable('mainFrameSet')">
        <frame src="frame_blanc.php" id="frame1" scrolling="auto" frameborder="0" />
        <frame src="frame_blanc.php" id="frame2" scrolling="auto" frameborder="0" />
    </frameset>  
</html>

I made a script that places a handle bar inside the document with which you can resize the frameset in FF and chrome. Not perfect but may help:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript">

    function makeFramesetVerticallyResizable(frameSetId) {
        var frameSet = document.getElementById(frameSetId);

        // insert a vertical box called resizeHandle into the righthand document:
        var frameDoc = frameSet.children[1].contentDocument;
        var resizeHandle = frameDoc.createElement("div");
        resizeHandle.style.backgroundColor = "#999999";// remove this line to hide the handle
        resizeHandle.style.position = "fixed";
        resizeHandle.style.width = "100%";
        resizeHandle.style.height = "6px";
        resizeHandle.style.top = "3px"; // put it a little away from the border so firefox can detect dragging to the left
        resizeHandle.style.left = "0px";
        resizeHandle.style.cursor = "n-resize";
        resizeHandle.style.zIndex = 99999;        
        frameDoc.body.insertBefore(resizeHandle, frameDoc.body.firstChild);

        // Drag functions:
        var dragStartScreenY = null;
        resizeHandle.draggable = true;
        resizeHandle.ondragstart = function(event) {
             dragStartScreenY = event.screenY;            
             event.dataTransfer.setData('text/plain', 'dummy');
             event.dataTransfer.effectAllowed = 'move';             
        };
        resizeHandle.ondrag = function(event) {
            if(dragStartScreenY !== null && event.screenY != 0) { // we have a mouse position ?
                var offset = event.screenY - dragStartScreenY;
                var height = frameSet.firstElementChild.offsetHeight;
                var newHeight = height + offset;
                frameSet.rows = "" + newHeight + ",*";
                dragStartScreenY = event.screenY;
            }            
        }        
        resizeHandle.ondragend = resizeHandle.ondrag;// Firefox does not give us the current mouse position during dragging, so resize the frames at the end        
    }



</script>
</head>
    <frameset id="mainFrameSet" rows="80%,20%" border="0" onload="makeFramesetVerticallyResizable('mainFrameSet')">
        <frame src="frame_blanc.php" id="frame1" scrolling="auto" frameborder="0" />
        <frame src="frame_blanc.php" id="frame2" scrolling="auto" frameborder="0" />
    </frameset>  
</html>

回复收藏 0 原文

~没有更多了~