Как загрузить куски CSS в iframe? - PullRequest
0 голосов
/ 13 ноября 2018

Мне нужна ваша помощь, чтобы выяснить, как лучше всего загрузить файлы 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

Спасибо

...