Question

Firefox中{p> Iframe不是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插件！我需要的只是一种简单的JavaScript方法，可以在调整顶部div时立即计算和更改底部div高度。

谢谢！

更新：CSS3调整大小属性不受支持：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/

Answer 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

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

调整iframe＆amp; textarea反向

2 个答案: