时间戳

首页 > 解决方案 > 动态设置 iFrame 的高度不起作用

javascript - 动态设置 iFrame 的高度不起作用

问题描述

这里我有两个 iframe 我要做的是，我必须在 window.load 之后更改 iframe 的高度。但在这种情况下，我得到的高度是最后一个 iframe 的高度。

例如：窗口加载后我得到

第一个 iframe 高度是 515px

第二个 iframe 高度是 199px

但是对两个 iframe 应用199px的高度是第二个 iframe 的高度。如果你改变帧的顺序，第一个是 199px，第二个是 515px

然后高度应用于两个框架是515px。

所以我想设置高度，即框架的实际高度。

这是我的代码，您可以从中获得灵感。您可以检查打印高度的控制台。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body>
      <iframe
      src="https://embed.kooapp.com/embedKoo?kooId=91f35ac5-dd15-4271-bb36-b9793131399a"
      name="kooFrame"
      id="1"
      ></iframe>
      <iframe
      src="https://embed.kooapp.com/embedKoo?kooId=803857a6-2a9d-4c70-9731-69213e80fbf0"
      name="kooFrame"
      id="2"
      ></iframe>
      
      <script>
        const iframe = document.getElementsByName('kooFrame');
      window.onload = () => {
        for (let i = 0; i < iframe.length; i++) {

    const ifrm = document.getElementById(i + 1);
    ifrm.scrolling = 'no';
    ifrm.frameBorder = 0;
    ifrm.allowFullScreen = true;
    ifrm.allowTransparency = true;
    ifrm.style.width = '100%';
    ifrm.contentWindow.postMessage('FrameHeight', '*');
    let lastData = '';

    window.addEventListener('message', (event) => {
      console.log('Line----68 index.html', event.data)      
      if(lastData !== event.data.FrameHeight){
        if (event.data.hasOwnProperty('FrameHeight')) {
        ifrm.style.height = `${event.data.FrameHeight}px`;
        lastData = event.data.FrameHeight
      }
      }
    });
  }
}
      </script>
  </body>
</html>

标签： javascripthtmliframe

解决方案

推荐阅读