Изменение размера iframe и текстовой области в обратном направлении

Iframe нельзя изменить в Firefox. Затем я решил поместить его в div и изменить его размер:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Resizable Iframe & Textarea</title>
<style>
#top, #bottom {
    width:300px;
    height:200px;
    border:1px solid #ccc;
    padding:10px;
}
#top {
    overflow:auto;
    resize:vertical;
}
iframe, textarea {
    display:block;
    width:100%;
    height:100%;
    margin:0;
    border:0;
    padding:0;
    resize:none;
    background:#ccc;
}
</style>
</head>
<body>
<div id="parent">
    <div id="top">
        <iframe name="myFrame" src="about:blank"></iframe>
    </div>
    <div id="bottom">
        <textarea></textarea>
    </div>
</div>
<script>
    var parent = document.getElementById("parent").style.height;
    var top = document.getElementById("top").style.height;
    var bottom = document.getElementById("bottom").style.height;
    window.frames["myFrame"].onresize = function() {
        bottom = parent - top;
    }
</script>
</body>
</html>

Демонстрация: http://jsfiddle.net/RainLover/EY4mR/

Вот что Я хотел бы добиться: когда я увеличиваю верхний div, нижний div должен уменьшаться (и наоборот), поэтому размер родительского div остается фиксированным.

Примечание. Пожалуйста, не подключайте frameset или jQuery! Все, что мне нужно, это простой подход JavaScript для расчета и изменения высоты нижнего div, как только я изменяю размер верхнего div.

Спасибо!

Обновление: свойство изменения размера в CSS3 плохо поддерживается: IE11 вообще его не понимает, а в Chrome/Safari/Opera вы можете только увеличить элемент, не уменьшайте его размер. Поэтому я решил изменить свой подход и вместо ручки изменения размера пользовательского интерфейса использовать ползунок. Интересно, не могли бы вы просмотреть мой код и сообщить мне, что вы думаете:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Resize</title>
    <style>
        textarea,
        iframe {
            display: block;
            width: 300px;
            height: 200px;
            margin: 0;
            border: 0;
            padding: 0;
        }
        textarea {
            background: green;
            resize: none;
        }
        iframe {
            background: blue;
        }
    </style>
</head>

<body>
    <input id="slide" oninput="resize();" type="range" min="0" max="400" value="200">
    <textarea id="textarea"></textarea>
    <iframe id="iframe"></iframe>
    <script>
        var slide = document.getElementById("slide");
        var textarea = document.getElementById("textarea");
        var iframe = document.getElementById("iframe");

        function resize() {
            var slideValue = slide.value;
            textarea.style.height = slideValue + "px";
            iframe.style.height = 400 - slideValue + "px";
        }
    </script>
</body>

</html>

Демонстрация: http://jsfiddle.net/RainLover/EY4mR/24/


javascript html iframe css resize
person Mori    schedule 18.01.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

element.style.prop дает вам значение, которое не обновляется при изменении значения исходного свойства. Попробуй это:

var topbox = document.getElementById("topbox");
var bottom = document.getElementById("bottom");
window.frames["myFrame"].onresize = function() {
    bottom.style.height =  400 - topbox.offsetHeight + 'px';
}

window.top — это объект DOM, который относится к самому верхнему окну браузера. В некоторых браузерах это может быть защищенное имя, поэтому я изменил имя на topbox.

Прямая демонстрация на jsFiddle.

person Teemu    schedule 18.01.2014
comment
Спасибо за ответ, но, похоже, это не сработает, если вы добавите реальный источник, например. example.com на iframe. - person Mori; 18.01.2014
comment
Это связано с политикой одного происхождения. Вам не разрешено обнаруживать onresize в стороннем окне. - person Teemu; 18.01.2014
comment
Я только что обновил свой код. Не могли бы вы взглянуть? Спасибо! - person Mori; 24.01.2014
comment
@RainLover Кажется, твоя скрипка работает нормально. За исключением IE, в котором oninput не срабатывает при изменении ползунка. Похоже, что IE запускает onchange из ползунка. Также это не будет работать в старых браузерах, которые не поддерживают type=range. - person Teemu; 24.01.2014
comment
В старых браузерах ввод type=range отображается как type=text, с помощью которого вы можете изменить значение ввода. Только что попробовал в IE8. - person Mori; 24.01.2014

arrow_upward
0
arrow_downward

Измените свой код на:

var parent = document.getElementById("parent").offsetHeight;
window.frames["myFrame"].onresize = function () {
  var top = document.getElementById("top").offsetHeight;
  document.getElementById("bottom").style.height = (parent - top) + "px";
}
person Frank Pfattheicher    schedule 18.01.2014
comment
Спасибо за ответ, но, похоже, это не сработает, если вы добавите реальный источник, например. example.com на iframe. - person Mori; 18.01.2014
comment
Хорошо, я вижу, поэтому вы должны использовать это: ‹br/› var parent = document.getElementById("parent").offsetHeight; var top = document.getElementById("top"); var bottom = document.getElementById("bottom") var oldHeight = bottom.offsetHeight; window.onmousemove = function () { var newHeight = parent - top.offsetHeight; if(newHeight != oldHeight) { oldHeight = newHeight; bottom.style.height = newHeight + "px"; } } - person Frank Pfattheicher; 18.01.2014