如何计算 iframe 的高度？答案

【问题标题】：how to calculate height of Iframe?如何计算 iframe 的高度？
【发布时间】：2020-05-29 14:03:28
【问题描述】：

我想在页眉组件和页脚组件之间插入 Iframe，我该如何计算该 Iframe 屏幕的高度？注意：（页眉和页脚的内容可能会改变）

    <div dangerouslySetInnerHTML={{
         __html: `<iframe
          class="iFrame-screen"
          src="${dynamic-website-inserted-here}" />`
          }}
         />
    </div>

css: 
.iFrame-screen {
    position: absolute;
    right: 0;
    top: -100px;
    z-index: 1;
    height: 110%;
    width: 100%;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
}

【问题讨论】：

只显示您的代码。你做了什么。
在你插入网站的iframe代码中，可以手动设置高宽
如果页眉和页脚有动态高度，那么只有 JavaScript 才有可能。您正在寻找视口高度 - 页眉高度 - 页脚高度。
欢迎来到 Stack Overflow！请通读help center，尤其是How do I ask a good question?，你最好的选择是做你的研究，search 以获取有关 SO 的相关主题，然后试一试。如果您在进行更多研究和搜索后卡住并且无法摆脱卡住，请发布您的尝试minimal reproducible example，并具体说明您卡在哪里。人们会很乐意提供帮助。
用推荐码编辑

标签： javascript css reactjs

【解决方案1】：

function calcHeight()
{
  //find the height of the internal page
  var the_height = document.getElementsByTagName('iframe')[0].contentWindow.document.body.scrollHeight;

   console.log('Iframe Height is ' + the_height + ' pixels');
};

【讨论】：

我收到此错误：“未捕获的类型错误：无法读取未定义的属性'文档'”@Moeez Saiyam
虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

【解决方案2】：

未测试，但您可以尝试一下。请注意，如果您在页眉和页脚上没有固定高度，这将失败。 calc() 计算视图高度减去页眉高度减去页脚高度。

<body>
  <div id="page">
    <header id="pageHeader">
    </header>
    <main id="pageMain">
      <iframe src="..."></iframe>
    </main>
    <footer id="pageFooter">
    </footer>
  </div>
</body>

使用这个 css。

html, body {
  height: 100%;
  margin: 0;
}
header, footer, main {
  display: block;
}
#page {
  min-height: 100%;
}
#pageHeader {
  height: 70px; /* or something else */
}
#pageFooter {
  height: 90px; /* or something else */
}
#pageMain {
  position: relative;
  height: calc(100vh - 160px); /* 100vh minus (header + footer) */
}
#pageMain iframe {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  border: 0;
}

【讨论】：