Replicating nested and togglable <frameset> in HTML5

199 Views Asked by Green Cloak Guy At 08 September 2021 at 19:45

I'm given to understand that the <frameset> tag is deprecated as of HTML5. Thankfully, Chrome still supports rendering it, and unfortunately, it's currently the only thing I've found that fits my use case.

The important element of the <frameset> tag that other frame-like objects lack is draggable borders, which I haven't been able to get working with iframes even with a prohibitive amount of javascript assistance.

The other important thing in my case is that one of the frames contains a button/link that causes the other frame to disappear or reappear. When that happens, the frames should resize appropriately to fill the space.

My current HTML looks like the following MCVE:

index.html

<html>
<head>
    <script language="javascript">
        function toggleBottomFrame() {
            var bottomFrame = document.getElementById("bottomFrame");
            var horizFrameset = document.getElementById("horizFrameset");
            if (bottomFrame.style.display == "none") {
                bottomFrame.style.display = "";
                horizFrameset.rows = "*,25%";
            } else {
                bottomFrame.style.display = "none";
                horizFrameset.rows = "*,0px";
            }
        }
        document.toggleBottomFrame = toggleBottomFrame;
    </script>
</head>
<frameset id="horizFrameset" rows="*,0px">
    <frameset id="vertFrameset" cols="300px,*">
        <frame id="topLeftFrame" src="buttonpage.html"></frame>
        <frame id="topRightFrame"></frame>
    </frameset>
    <frame id="bottomFrame" style="display:none"></frame>
</frameset>
</html>

buttonpage.html

<html>
<head></head>
<body>
    <button onclick="parent.frameElement.ownerDocument.toggleBottomFrame();">
</body>
</html>

This works both in the IE11 that the code was initially written for (and needs to continue to support), as well as in Chrome.

How do I implement the exact same functionality (including, most importantly, the ability to drag around the borders of the frames with my mouse to expand or shrink one of the frames) using non-deprecated functionality?

If possible, I'd like a solution in standard client-side JS or HTML, without needing to import another library like resize.js. This is meant for a very lightweight frontend, and I don't want to bloat it down with libraries I don't need.

There are 2 best solutions below

Ani

Ani On 11 September 2021 at 10:44

You should be able to achieve the shrink and grown functionality using the flex layout. Below 2 approaches may work. Both the approaches has the right section and bottom section as iframe and the left section has button to show and hide the right and bottom sections.

Option 1

Using flex and using the css resize property.

Drawback is that you will need to resize using the resize button shown at the bottom right corners. The left section's bottom right corner can be used for horizontal resizing and the right section's bottom right corner can be used for vertical resizing. Note that due to the iframe contents the right section's bottom right corner resize button may not be visible, but if you bring the cursor to the bottom right you will see the cursor changing to resize and allowing you to resize.

function toggleBottom() {
  if (document.getElementById('bottomFrame').clientHeight > 0) {
    document.getElementById('topFrame').style.height = '100%';
  } else {
    document.getElementById('topFrame').style.height = '80%';
  }
}

function toggleRight() {
  if (document.getElementById('topRightFrame').clientWidth > 0) {
    document.getElementById('topLeftFrame').style.width = '100%';
  } else {
    document.getElementById('topLeftFrame').style.width = '50%';
  }
}

html,
body {
  height: 98%;
}

.page-container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: row;
  resize: vertical;
  border: 1px solid #000;
  overflow: hidden;
}

.container-top {
  height: 80%;
}

.container-bottom {
  flex: 1 1;
  overflow: hidden;
}

.container-left {
  width: 30%;
  border: 1px solid #000;
  resize: horizontal;
  overflow: hidden;
}

.container-right {
  flex: 1 1;
  height: 100%;
  border: 1px solid #000;
  overflow: hidden;
  display: flex;
}

.frame-right {
  flex: 1 1;
}

.frame-bottom {
  flex: 1 1 100%;
  border: 1px solid #000;
}

<html>
<body class="page-container">
  <div class="container container-top" id="topFrame">
    <div class="container-left" id="topLeftFrame">
      <button onclick="toggleBottom()">Toggle Bottom</button>
      <button onclick="toggleRight()">Toggle Right</button>
    </div>
    <div class="container-right" id="topRightFrame" >
      <iframe src="https://stackoverflow.com" class="frame-right">
    </iframe>
    </div>
  </div>
  <div class="container container-bottom" id="bottomFrame">
    <iframe class="frame-bottom" src="https://stackoverflow.com"></iframe>
  </div>
</body>

</html>

Option 2

Using flex and using some scripting we should be able to make the whole border draggable. This is inspired from the answer in https://stackoverflow.com/a/53220241/2772300

const topRightFrame = document.getElementById("topRightFrame");
const topLeftFrame = document.getElementById("topLeftFrame");
const bottomFrame = document.getElementById("bottomFrame");
const topFrame = document.getElementById("topFrame");
const borderSize = 4;

function toggleBottom() {
  if (bottomFrame.clientHeight > borderSize) {
    topFrame.style.height = '100%';
  } else {
    topFrame.style.height = '80%';
  }
}

function toggleRight() {
  if (topRightFrame.clientWidth > borderSize) {
    topLeftFrame.style.width = '100%';
  } else {
    topLeftFrame.style.width = '50%';
  }
}


let mousePosition;
function resizeHorizontal(e){
  const dx = mousePosition - e.x;
  mousePosition = e.x;
  topLeftFrame.style.width = (parseInt(getComputedStyle(topLeftFrame, '').width) - dx) + "px";
}

topRightFrame.addEventListener("mousedown", function(e){
  if (e.offsetX < borderSize) {
    mousePosition = e.x;
    document.addEventListener("mousemove", resizeHorizontal, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resizeHorizontal, false);
}, false);


function resizeVertical(e){
  const dy = mousePosition - e.y;
  mousePosition = e.y;
  topFrame.style.height = (parseInt(getComputedStyle(topFrame, '').height) - dy) + "px";
}

bottomFrame.addEventListener("mousedown", function(e){
  if (e.offsetY < borderSize) {
    mousePosition = e.y;
    document.addEventListener("mousemove", resizeVertical, false);
  }
}, false);

document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resizeVertical, false);
}, false);

html,
body {
  height: 98%;
}

.page-container {
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.container-top {
  height: 80%;
}

.container-left {
  width: 50%;
  overflow: hidden;
  height: 100%;
}

.container-right {
  flex: 1 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  padding-left: 4px;
  background-color: #ccc;
  cursor: ew-resize;
}

.frame-right {
  flex: 1 1;
}

.container-bottom {
  flex: 1 1;
  overflow: hidden;
  padding-top: 4px;
  background-color: #ccc;
  cursor: ns-resize;
}

.frame-bottom {
  flex: 1 1 100%;
}

iframe {
  border: 0;
}

<html>
<body class="page-container">
  <div class="container container-top" id="topFrame">
    <div class="container-left" id="topLeftFrame">
      <button onclick="toggleBottom()">Toggle Bottom</button>
      <button onclick="toggleRight()">Toggle Right</button>
    </div>
    <div class="container-right" id="topRightFrame" >
      <iframe src="https://stackoverflow.com" class="frame-right">
    </iframe>
    </div>
  </div>
  <div class="container container-bottom" id="bottomFrame">
    <iframe class="frame-bottom" src="https://stackoverflow.com"></iframe>
  </div>
</body>

</html>

David Bradshaw

David Bradshaw On 13 September 2021 at 21:16

Have you looked a Golden Layout to do the resizing? You could then place iframes inside to match the size of the containing div.

Sorry this not a more complete answer, but though this might be an area worth exploring that is not likely to come up.