Изменить размер iframe & textarea в обратном направлении

Iframe не reziable в Firefox. Тогда я решил поставить его в div и размер, что вместо того, чтобы:Изменить размер iframe & textarea в обратном направлении

<!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.

Спасибо!

Обновление: свойство CSSize resize не поддерживается: 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/

источник

2014-01-18 Mori

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.

A live demo at jsFiddle.

источник

2014-01-18 09:32:44 Teemu

Спасибо за ответ, но это не похоже на работу, если вы добавите реальный источник, например, http://www.example.com/, в 'iframe'. – Mori

Это связано с [политикой того же происхождения] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). Вам не разрешено обнаруживать 'onresize' в стороннем окне. – Teemu

Я только что обновил свой код. Не могли бы вы взглянуть? Благодаря! – Mori

Изменить код на:

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"; 
}

источник

2014-01-18 09:42:40

Спасибо за ответ, но он не работает, если вы добавите настоящий источник, например. http://www.example.com/, в 'iframe'. – Mori

Итак, я вижу, поэтому вы должны использовать это:
'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; если (новыйHeight!= oldHeight) { oldHeight = newHeight; bottom.style.height = newHeight + "px"; } } ' –

Изменить размер iframe & textarea в обратном направлении

ответ

Смежные вопросы