Ubah ukuran iframe & textarea dalam arah terbalik

Iframe tidak dapat diterima di Firefox. Lalu saya memutuskan untuk memasukkannya ke dalam div dan mengubah ukurannya:

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

Demo: http://jsfiddle.net/RainLover/EY4mR/

Inilah yang terjadi Saya ingin mencapai: ketika saya memperbesar div atas, div bawah akan mengecil (dan sebaliknya) sehingga ukuran induk div tetap.

Catatan: Tolong, tidak ada plugin frameset atau jQuery! Yang saya perlukan hanyalah pendekatan JavaScript sederhana untuk menghitung dan mengubah tinggi div bawah segera setelah saya mengubah ukuran div atas.

Terima kasih!

Pembaruan: Properti pengubahan ukuran CSS3 tidak didukung dengan baik: IE11 tidak memahaminya sama sekali dan di Chrome/Safari/Opera Anda hanya dapat memperbesar elemen, tidak mengubah ukurannya menjadi lebih kecil. Oleh karena itu saya memutuskan untuk mengubah pendekatan saya dan alih-alih mengubah ukuran UI, gunakan kontrol slider. Saya ingin tahu apakah Anda dapat meninjau kode saya dan memberi tahu saya pendapat Anda:

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

Demo: http://jsfiddle.net/RainLover/EY4mR/24/


javascript html iframe css resize
person Mori    schedule 18.01.2014    source sumber

Jawaban (2)


arrow_upward
2
arrow_downward

element.style.prop memberi Anda nilai, yang tidak diperbarui, ketika nilai properti asli berubah. Coba ini:

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

window.top adalah objek DOM, yang mengacu pada jendela browser paling atas. Di beberapa browser mungkin nama tersebut dilindungi, itu sebabnya saya mengubah namanya menjadi topbox.

Demo langsung di jsFiddle.

person Teemu    schedule 18.01.2014
comment
Terima kasih atas jawabannya, tetapi sepertinya tidak berhasil jika Anda menambahkan sumber sebenarnya, mis. example.com, ke iframe. - person Mori; 18.01.2014
comment
Hal ini disebabkan oleh kebijakan asal yang sama. Anda tidak diperbolehkan mendeteksi onresize di jendela pihak ketiga. - person Teemu; 18.01.2014
comment
Saya baru saja memperbarui kode saya. Maukah Anda melihatnya? Terima kasih! - person Mori; 24.01.2014
comment
@RainLover Biola Anda sepertinya berfungsi dengan baik. Kecuali di IE, di mana oninput sepertinya tidak menyala ketika penggeser diubah. Sepertinya IE memicu onchange dari penggeser. Ini juga tidak akan berfungsi di browser lama yang tidak mendukung type=range. - person Teemu; 24.01.2014
comment
Di browser lama, masukan type=range ditampilkan sebagai type=text yang dapat digunakan untuk mengubah nilai masukan. Baru saja mencobanya di IE8. - person Mori; 24.01.2014

arrow_upward
0
arrow_downward

Ubah kode Anda menjadi:

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
Terima kasih atas jawabannya, tetapi sepertinya tidak berhasil jika Anda menambahkan sumber sebenarnya, mis. example.com, ke iframe. - person Mori; 18.01.2014
comment
Oke, begitu, jadi kamu harus menggunakan ini: ‹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