javascript 如何在react效果中可靠地获取Iframe内容主体更新

rbpvctlc 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(249)

我使用sandbox="allow-same-origin"通过srcDoc将html加载到iframe中。
我注意到frameRef.contentDocument.body.innerHTML是空的，即使内容显示了，我设置了一个效果来观察这个属性，它总是未定义的。
我怎样才能可靠地获得iframe内容的主体，并能够观察它的变化？
沙盒：https://codesandbox.io/s/bold-voice-ufp664
在控制台中，如果你执行refNode.contentDocument.body.innerHTML，你会得到正确的输出，但是通过react，它是未定义的。
我尝试在innerHTML以及整个节点对象等特定属性上设置效果挂钩，但没有效果。
我试着用一个普通的裁判，结果还是一样。
我期望能够获得iframe的主体并观察它的变化。

JavaScript

来源：https://stackoverflow.com/questions/74964647/how-to-reliably-get-iframe-content-body-updates-in-react-effect

1条答案

按热度按时间

euoag5mw1#

使用iframe元素的onLoad事件设置when帧就绪时的状态。

代码：

export default function App() {
  const [frameElement, setFrameElement] = React.useState(null);
  const [templateHtml, setTemplateHtml] = React.useState(null);

  const handleFrameElement = React.useCallback(e => {
    setFrameElement(e.target);
  }, []);

  React.useEffect(() => {
    setTimeout(() => setTemplateHtml(html), 1200);
  }, []);

  React.useEffect(() => {
    console.log(
      "HOOK ",
      frameElement?.contentDocument?.body?.innerHTML?.length
    );
  }, [frameElement]);

  return (
    <div>
      {templateHtml && (
        <iframe
          srcDoc={templateHtml}
          sandbox="allow-same-origin"
          onLoad={handleFrameElement}
        />
      )}
    </div>
  );
}

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 如何在react效果中可靠地获取Iframe内容主体更新

1条答案

相关问题

热门标签

最新问答