iframe-embedded-project-demo
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .page2 {
      flex: 1;
    }
    .container {
      width: 300px;
      height: 300px;
      display: flex;
    }
    .test {
      background-color: aqua;
      flex: 1;
    }
  </style>
  <body>
    <div class="app">
      <iframe
        src="http://127.0.0.1:5500/child.html"
        width="100%"
        height="40px"
        class="page1"
      ></iframe>
      <div class="page2">
        <iframe
          width="100%"
          frameborder="no"
          height="100%"
          src="https://www.bilibili.com/"
        ></iframe>
      </div>
    </div>
    <div class="container">
      <div class="test"></div>
    </div>
    <script>
      const page1 = document.querySelector(".page1");
      const page2 = document.querySelector(".page2");
      window.addEventListener("message", (e) => {
        const { targetUrl, userId } = e.data || {};
        if (targetUrl && userId) {
          page2.children[0].src = `${targetUrl}/${userId}`;
        }
      });

      console.log(page1, page2);
    </script>
  </body>
</html>