Мне нужна ваша помощь, чтобы выяснить, как лучше всего загрузить файлы iframe css, разбитые по webpack 4 и mini-css-extract-plugin.
Итак, у меня есть приложение, которое визуализирует в iframe.Для этого я использую react-iframe-component
.
В общем, приложение выглядит так
<Iframe
ref={(component) => {
this.iframe = component;
}}
initialContent={`<!DOCTYPE html><html><head><link href="${urlToStylesBundle}" rel="stylesheet"></head><body style="background: transparent"><div></div></body></html>`}
style={{}}
>
<FrameContextConsumer>
{// Callback is invoked with iframe's window and document instances
({ document, window }) => (
<Provider store={store}>
<Container
ref={this.app}
docObject={document}
windowObject={window}
config={config}
/>
</Provider>
)}
</FrameContextConsumer>
</Iframe>
Я собираюсь добавить больше «Контейнеров» и использовать динамический импорт для разделения кода.Таким образом, мой индекс будет примерно таким:
<Iframe
...
>
<FrameContextConsumer>
...
<Container1
...
/>
...
</FrameContextConsumer>
</Iframe>
<Iframe
...
>
<FrameContextConsumer>
...
<Container1
...
/>
...
</FrameContextConsumer>
</Iframe>
<Iframe
...
>
<FrameContextConsumer>
...
<Container3
...
/>
...
</FrameContextConsumer>
</Iframe>
etc.
Так что, поскольку я делаю динамический импорт, я больше не могу указывать таблицы стилей в initialContent.Вместо этого приложение добавляет <Link src={urlToChunk.css}
в заголовок страницы документа.Это нарушает стили страницы и не реализует стили в iframe.
Временное решение, которое я нашел, - найти все стили в заголовке по суффиксу имени файла и поместить их в заголовок iframe следующим образом:
getStylesheets = () => {
const cssChunks = document.querySelectorAll(
'link[href*="suffix-in-file-name.css"], link[data-href*="suffix-in-file-name.css"]'
);
const frameHead = Array.from(cssChunks).reduce((acc, el: HTMLLinkElement) => {
const href = el.href || el.dataset.href;
const head = acc + el.outerHTML;
// rename href attribute to data-href to prevent side effect on a
// website
if (el.href) {
el.dataset.href = href;
el.removeAttribute('href');
}
return head;
}, '');
return frameHead
};
.....
import HtmlParser from 'html-react-parser';
.....
render() {
const frameHead = this.getStylesheets();
return (
<Iframe
ref={(component) => {
this.iframe = component;
}}
head={HtmlParser(frameHead)}
У кого-нибудь есть лучшее решение?Или есть способ не извлекать стили из CSS-файлов и добавлять <style>..</style>
в iframe
Спасибо