Max*_*Max 3 javascript iframe reactjs
我正在 iframe 中嵌入一个 React 应用程序。该应用程序在与 iframe 父级相同的域中运行。我可以通过使用 iframe 的事件来等待 iframe 加载，onload如下所示：
<body>
<iframe id="frame" src="http://some/react/app"></iframe>
<script>
const frame = document.getElementById("frame");
frame.onload = () => {
frame.querySelector("...");
}
</script>
</body>
但是，querySelector如果尝试查询#reactRootReact 本身创建的 div 下的任何元素，则返回 null，可能是因为 React 尚未完成应用程序内容的渲染。
使用console.log在函数中记录 iframe 的主体onload会在控制台中显示 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 dodocument 之前等待任意时间是唯一的方法？我不太喜欢这个解决方案，因为一旦慢速设备需要超过一秒的时间来渲染 React 应用程序，这个解决方案就会崩溃。
加载框架后，您可以轮询是否存在预期元素。
const startPolling = () => {
if (frame.querySelector("...")) {
console.log('react is ready')
return
}
setTimeout(startPolling, 1000)
}
frame.onload = () => {
startPolling()
}
| 归档时间： |
|
| 查看次数： |
10732 次 |
| 最近记录： |