如何解决react iframe ref DOM 更新在 Firefox 中的行为与 chrome 不同
以下组件
import React from "react";
const App = (props) => {
const iframe = React.useRef();
React.useEffect(() => {
(async () => {
// await new Promise((r) => setTimeout(r,1));
iframe.current.contentDocument.body.style.backgroundColor = "salmon";
})();
},[]);
return (
<>
<iframe ref={iframe} title="foo" />
</>
);
};
export default App;
在 Chrome 中,iframe 具有颜色,但在 Firefox 中没有。
如果我在像 await new Promise((r) => setTimeout(r,1000));
这样的 ref DOM 更新之前稍微睡一觉,那么 Firefox 中的 iframe 也有颜色。
运行 https://codesandbox.io/s/determined-pike-jc5h3?file=/src/App.js 可以看到差异。
只有 iframe 有这个问题,其他普通标签如 div 没有。
是什么让 Firefox 的行为与 Chrome 不同?
chrome 版本:版本 89.0.4389.90(官方版本)(x86_64) Firefox 版本:86.0.1(64 位)
顺便说一句,我也尝试在本地 PC 上运行它。我觉得在 Firefox 上,每次刷新页面,在极短的时间内 iframe 有颜色然后消失。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。