ปรับขนาด iframe และพื้นที่ข้อความในทิศทางย้อนกลับ

Iframe ไม่สามารถreziable ใน 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 คุณสามารถขยายได้เฉพาะองค์ประกอบเท่านั้น ไม่ปรับขนาดให้เล็กลง ดังนั้นฉันจึงตัดสินใจเปลี่ยนวิธีการของฉันและแทนที่จะใช้ตัวจัดการปรับขนาด 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 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