反向调整 iframe 和 textarea 的大小答案

【问题标题】：Resize iframe & textarea in reverse directions反向调整 iframe 和 textarea 的大小
【发布时间】：2014-01-18 09:06:30
【问题描述】：

Iframe 在 Firefox 中不是 reziable。然后我决定把它放在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 插件！只要我调整顶部div 的大小，我所需要的只是一个简单的JavaScript 方法来计算和更改底部div 的高度。

谢谢！

更新：CSS3 resize 属性没有得到很好的支持：IE11 根本不理解它，在 Chrome/Safari/Opera 中只能放大元素，而不是将其调整为更小。因此我决定改变我的方法，而不是 UI 调整大小手柄使用滑块控件。我想知道您是否可以查看我的代码并让我知道您的想法：

<!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 css iframe resize

【解决方案1】：

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.

【讨论】：

感谢您的回答，但如果您添加真实来源，例如，它似乎不起作用example.com，到iframe。
这是由于Same-origin policy。不允许在第三方窗口中检测onresize。
我刚刚更新了我的代码。你介意看看吗？谢谢！
@RainLover 你的小提琴似乎工作正常。除了在 IE 中，oninput 在更改滑块时似乎不会触发。从滑块看起来像IE triggers onchange。这也不适用于不支持type=range的旧浏览器。
在旧版浏览器中，输入type=range 显示为type=text，您可以使用它来更改输入值。刚刚在 IE8 中试了一下。

【解决方案2】：

将您的代码更改为：

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

【讨论】：

感谢您的回答，但如果您添加真实来源，例如，它似乎不起作用example.com，到iframe。
好的，我明白了，所以你必须使用这个：
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"; } }