Разрешить изменение размера фреймов HTML при добавлении атрибута frameBorder = 0? - PullRequest
Новая
       30

Разрешить изменение размера фреймов HTML при добавлении атрибута frameBorder = 0?

2 голосов
/ 17 августа 2011

Прежде чем комментарии начнут кричать "фреймы - это зло", позвольте мне добавить заявление об отказе: "Я просто портирую устаревшее приложение и у меня нет времени, чтобы избавиться от фреймов!": -)

Есть набор кадров, содержащий два кадра.Мне не нравится рамка по умолчанию, отображаемая браузером (особенно в Chrome и Firefox).Он слишком толстый и навязчивый!Поэтому я подумал, что скрою рамку по умолчанию, используя атрибут frameborder=0, и добавлю желаемый стиль для содержимого внутри рамок.Проблема в том, что после добавления frameborder=0 кадры больше не меняются в Chrome и Safari, тогда как IE и Firefox все еще могут изменять их размер.Это мой код: 

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

Есть ли способ переопределить рендеринг границы кадра по умолчанию и при этом сохранить изменяемый размер?

Ответы [ 2 ]

0 голосов
/ 13 июня 2013

Я сделал скрипт, который помещает ручку внутри документа, с помощью которой вы можете изменить размер набора фреймов в 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>
0 голосов
/ 17 августа 2011

Стиль ваших кадров с нормальным CSS, я думаю, это должно работать, но да, кадры злые, и никто их не использует>.>

Попробуйте добавить это к стилям страницы набора фреймов: 

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