背景
frameset は HTML5 で廃止予定のため、iframe に置き換える必要がある。
frameset では フレームの枠を掴んでサイズ変更できるが、
iframe ではサイズ変更できないのでJavaScriptでサイズ変更できるようにする。
実装方法
以下のように実装する。
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
}
hr {
cursor: n-resize;
height: 2px;
margin-top: 1px;
margin-bottom: 5px;
}
#overlay {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
transition: .3s linear;
display: none;
cursor: n-resize;
}
iframe {
width: 100%;
border: none;
}
</style>
<body>
<div id="overlay"></div>
<iframe id="frame1" src="https://en.wikipedia.org/wiki/IFrame" style="height:70vh"></iframe>
<hr>
<iframe id="frame2" src="https://en.wikipedia.org/wiki/IFrame" style="height:25vh"></iframe>
<script>
//Make the DIV element draggagle:
dragElement(document.querySelector("body > hr"));
function dragElement(elmnt) {
elmnt.onmousedown = dragMouseDown;
function dragMouseDown() {
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
document.getElementById("overlay").style.display = "block";
}
function elementDrag(e) {
// set the element's new position:
document.getElementById("frame1").style.height = (e.clientY - 15) + "px";
document.getElementById("frame2").style.height = window.innerHeight - e.clientY - 10 + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
document.getElementById("overlay").style.display = "none";
}
}
</script>
</body>
</html>