react -确保在iframe渲染之前加载css
react -确保在iframe渲染之前加载css
提问于 2019-08-27 09:30:50
处理大量未定义样式的内容问题。我有一个插入到用户页面上的聊天小部件。这样我就不会和现有的风格冲突了。我正在使用react-frame-component在iframe中渲染。这工作得很好，但我遇到的一个问题是CSS。
react-frame-component接受一个适当的head，您可以使用它来传递到样式表的链接。使用MiniCSSExtractPlugin，我能够将我的css放入一个单独的文件中，然后我可以链接到该文件：
render(props, state) {
return (
<Frame
head={<link rel="stylesheet" type="text/css" href="style.css" />}
scrolling="no"
>
<ChatWidget />
</Frame>
);
}有了这个，我得到了可怕的闪光灯无样式的内容。我想这是因为包括<ChatWidget>在内的所有东西都是在css完全下载之前渲染的。
有没有一种方法可以确保CSS在一切渲染之前都被下载？
另外，我不确定这是否重要，但我使用的是Preact。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-02 00:53:40
我最终编写了自己的iframe组件，使用了react-frame-component的一些技巧，但以一种我可以确定我可以控制它如何呈现的方式来编写它。下面是我的iframe组件的样子(注意，它使用了Preact，它与React有一些细微的区别-在React中复制它是非常容易的)：
import {h, Component, createRef} from 'preact';
import {createPortal} from 'preact/compat';
import {cssLink} from '../utilities';
export default class Frame extends Component {
iframeNode = createRef();
iframeTest = document.createElement('iframe');
static initialContent() {
return `<!DOCTYPE html><head><link rel="stylesheet" type="text/css" href="${cssLink}"></head><body></body></html>`;
}
componentDidMount() {
this.iframeNode.addEventListener('load', this.handleLoad);
}
handleLoad = () => {
this.iframeRoot = this.iframeNode.contentDocument.body;
this.forceUpdate();
};
sourceProp() {
const canUseSrcDoc = 'srcdoc' in this.iframeTest;
if (canUseSrcDoc) {
return {
srcdoc: Frame.initialContent(),
};
}
// inserting Frame.initialContent() as the src is a hack for older browsers
// to allow inserting our stylesheet before the children render, preventing
// flashes of unstyled content
return {
src: `javascript: '${Frame.initialContent()}'`,
};
}
render(props) {
const {children, ...rest} = props;
return (
<iframe
{...rest}
{...this.sourceProp()}
ref={ref => (this.iframeNode = ref)}
>
{this.iframeRoot && createPortal(children, this.iframeRoot)}
</iframe>
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57666672
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号