为啥我的 React 组件在 iframe 中的滚动高度为 150 像素？

Posted 2023-03-05

【中文标题】为啥我的 React 组件在 iframe 中的滚动高度为 150 像素？

【英文标题】：Why is the scrollheight of my React component in an iframe 150px?为什么我的 React 组件在 iframe 中的滚动高度为 150 像素？

【发布时间】：2021-10-04 06:47:27

【问题描述】：

我有一个 AngularJS 网站和一个 React 应用程序在同一个域上运行。我正在尝试通过 iframe 运行 React 组件以显示在网站的一个网页上。 我有组件显示，但我试图使 iframe 的高度等于内容的高度，这样就不需要滚动条。我尝试了很多解决方案，似乎使用document.getElementById('my-iframe').contentWindow.document.body.scrollHeight 是正确的方法，但是当我在设置 iframe 高度时控制台日志时，这始终是 150px。

我有一个setTimeout，所以我要等到 iframe 内容完全加载，但即使这样，高度也会记录为 150 像素。我知道内容远不止这些，因为滚动条与 iframe 一起出现，而不是全高显示。

我知道 iframe 默认高度是 150 像素，但内容比这大 - 关于如何从网站访问 React 组件内容的真实高度有什么想法吗？

【参考方案1】：

iframe html 元素具有默认高度； documentation.

要更新默认高度，您需要传递height 属性，如下所示。

<iframe id="iframe-abc"  src="abc.com"/>
<iframe id="iframe-abc"  src="abc.com"/>