我在 iframe 中嵌入了一个 React 应用程序。该应用程序在与 iframe 父级相同的域中运行。我可以使用 iframe 的 onload 事件等待 iframe 加载，如下所示:
<body>
<iframe id="frame" src="http://some/react/app"></iframe>
<script>
const frame = document.getElementById("frame");
frame.onload = () => {
frame.querySelector("...");
}
</script>
</body>
然而，如果尝试查询由 React 自身创建的 #reactRoot div 下的任何元素，则 querySelector 返回 null，这可能是因为 React 尚未完成对内容的渲染应用程序。
使用 console.log 在 onload 函数中记录 iframe 的主体，在控制台中显示 React 应用程序的完整主体和所有小部件。我认为发生这种情况是因为记录的 body 元素只是一个引用，当我在控制台中看到它时，React 渲染已经完成。
当像这样使用 setTimeout 时，我也可以访问 React 应用程序的完整主体，因为 React 渲染将在超时函数执行之前完成:
<body>
<iframe id="frame" src="http://some/react/app"></iframe>
<script>
const frame = document.getElementById("frame");
frame.onload = () => {
setTimeout(() => console.log(frame.querySelector("...")), 1000);
}
</script>
</body>
是否有更可靠的方法来等待 iframe 中的 React 应用程序完成渲染，或者等待任意时间才能访问 iframe 文档是唯一的方法？我不太喜欢这个解决方案，因为一旦慢速设备需要超过一秒的时间来呈现 React 应用程序，这个解决方案就会崩溃。
最佳答案
加载框架后，您可以轮询是否存在预期元素。
const startPolling = () => {
if (frame.querySelector("...")) {
console.log('react is ready')
return
}
setTimeout(startPolling, 1000)
}
frame.onload = () => {
startPolling()
}
关于javascript - 如何等到 iframe 中的 React 呈现它的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71203295/