Search code examples
htmliframechangelog

How can I stack multiple iframe one on top of each others and dynamically set the height of each one

I am trying to build a changelog page for our software.

I'd like to have one html file per version so we can display the version specific page when the user install a specific update. For example, after installing version 1.0.0.1, the user see the changelog page of 1.0.0.1. But I also want a main page were we see all the updates one after the other.

So I thought I could use iframes to embed the version specific pages in the main page, that way we don't have to update two page everytime, we just need to add the iframe in the main page.

However, the iframes height are never going higher than 150px. Yes, I can manually adjust the height of each iframe, but it would be much better if it was dynamically adjusting to the maximum height of the content in the iframe.

Here is what it looks like :

My Changelog at the moment

Here is my code :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Changelog MySoftware 11</title>
  <h1 style="max-width:100%;height:auto;">Changelog MySoftware 11</h1>
</head>

<body>
    <div>
      <iframe src="11.0.37.1/11.0.37.1.html" allowTransparency="true" scrolling="no" frameborder="0" width="100%" height="100%">
      </iframe>
    </div>
    <div>
      <iframe src="11.0.37.0/11.0.37.0.html" allowTransparency="true" scrolling="no" frameborder="0" width="100%" height="100%">
      </iframe>
    </div>
</body>

</html>

I tried this js with no success : https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/

It gave me this error : Uncaught DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "null" from accessing a cross-origin frame.

Thank you,

Solution

  • Found an answer, will leave it here for anybody else in the same position.

    You can use this javascript to resize the iframe. It doesn't work locally when you open the html file on your computer, but it works once on the web server. Note that it might also only works if the content of the iframe is on the same domain. Haven't tested with content outside of the domain.

    <body>
  <div>
    <iframe id="iframe1" src="11.0.37.1/11.0.37.1.html" allowtransparency="true" scrolling="no" frameborder="0" width="100%" onload="resizeIframe(this)">
    </iframe>
  </div>
  <div>
    <iframe id="iframe2" src="11.0.37.0/11.0.37.0.html" allowtransparency="true" scrolling="no" frameborder="0" width="100%" onload="resizeIframe(this)">
    </iframe>
  </div>

  <script>
    function resizeIframe(iframe) {
      var contentHeight = iframe.contentWindow.document.body.scrollHeight;
      iframe.style.height = contentHeight + 'px';

      // Use postMessage to handle cross-origin communication
      iframe.contentWindow.postMessage({ type: 'resize', height: contentHeight, iframeId: iframe.id }, '*');
    }

    // Listen for postMessage from iframes
    window.addEventListener('message', function (event) {
      if (event.data.type === 'resize') {
        document.getElementById(event.data.iframeId).style.height = event.data.height + 'px';
      }
    });
  </script>
</body>