如何在反应效果中可靠地获取 Iframe 内容正文更新-解网

问：

我正在通过 srcDoc 将 html 加载到 iframe 中，并使用 .sandbox="allow-same-origin"

我注意到即使显示内容也是空的。我设置了一个效果来监视该属性，但它始终未定义。frameRef.contentDocument.body.innerHTML

如何可靠地获取 iframe 内容的正文并能够观察其变化？

沙盒：https://codesandbox.io/s/bold-voice-ufp664

在控制台中，如果这样做，则会获得正确的输出。但是通过反应，它是不确定的。refNode.contentDocument.body.innerHTML

我尝试在特定属性（如 innerHTML 以及整个节点对象）上设置效果钩子，但无济于事。

我尝试使用常规参考，结果相同。

我希望能够获得 iframe 的主体并观察它的变化。

javascript 反应js dom iframe 反应钩子

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>
  );
}

上一个：DOMException 阻塞 A 帧/跨原点帧，无法解决 [已关闭]

下一个：如何使用 Ref 触发 iframe youtube 视频播放按钮？

如何在反应效果中可靠地获取 Iframe 内容正文更新

How to reliably get Iframe content body updates in react effect

评论