使用 React Hooks 自动调整 iframe 的高度

Question

我一直致力于自动调整 iframe 高度。

该问题的解决方案在 React Hooks 中不起作用。

我已阅读 Setting iframe height to scrollHeight in ReactJS 和 Adjust width and height of iframe to fit with content in it。我已经探索了其他帖子并尝试了几次几乎一个星期。但是，我还没有找到正确的方法来解决这个问题。

我简化了我的尝试。 My code

除了我的代码，我还尝试了iframeResizer.min.js，但它不起作用。我相信这是因为反应动态生成。我找到了iframe-resizer-react并尝试了，但我没有找到解决方法。

任何人都可以有同样的情况吗？如何在 React Hooks 中自动调整 iframe 高度？

Answer 1

来自Setting iframe height to scrollHeight in ReactJS：

使用 iframe 中的 onLoad() 处理程序以确保在尝试调整内容之前已加载内容 - 如果您尝试使用 React 的生命周期方法（如 componentDidMount()），您将面临内容尚不存在的风险。

function FrameWrapper() {
  const ref = React.useRef();
  const [height, setHeight] = React.useState("0px");
  const onLoad = () => {
    setHeight(ref.current.contentWindow.document.body.scrollHeight + "px");
  };
  return (
    <iframe
      ref={ref}
      onLoad={onLoad}
      id="myFrame"
      src="http://demo_iframe.htm"
      width="100%"
      height={height}
      scrolling="no"
      frameBorder="0"
      style={{
        maxWidth: 640,
        width: "100%",
        overflow: "auto",
      }}
    ></iframe>
  );
}

PS：如果 iframe 位于不同的域中，您将遇到跨域策略问题。