Как загрузить CSS, предоставленный веб-пакетом, внутри IFrame, созданного с использованием библиотеки «response-frame-component»? - PullRequest
Новая
       15

Как загрузить CSS, предоставленный веб-пакетом, внутри IFrame, созданного с использованием библиотеки «response-frame-component»?

0 голосов
/ 07 мая 2018

Я пытаюсь визуализировать свой компонент React внутри iframe. Я получил его на работу с помощью библиотеки «response-frame-component». Проблема в том, что стили загружаются вне iframe, в конце элемента head. Я хочу изменить его так, чтобы он загружался внутри элемента "head" элемента iframe. Я использую Webpack для генерации пакетов с включенным JS и CSS, и я увидел, что могу изменить, где «style-loader» будет загружать стили, установив опцию «insertInto», но это выдает ошибку: 

Uncaught Error: Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.

Это мой компонент React: 

import Frame from 'react-frame-component'
...
ReactDOM.render(
  <Frame id="someId">
    <Provider store={Store.get()}>
      <Container/>
    </Provider>,
  </Frame>,
  document.body
);

Это мой "загрузчик стилей" в конфигурации Webpack: 

{
  loader: 'css-loader',
  options: {
    insertInto: () => document.querySelector("#someId"),
  },
}

Я думаю, что проблема в том, что компонент не отображался, когда webpack пытался включить стили. Как это решить?

1 Ответ

0 голосов
/ 22 июля 2019

Вам потребуется загрузить стили во временный элемент в качестве заполнителя, а затем использовать Javascript для клонирования этих стилей в новый фрейм. 

// index.html
...
<div id="dynamic-styles"></div>
...

// webpack.config.js
...
{
  loader: 'css-loader',
  options: {
    insertInto: () => document.getElementById("dynamic-styles"),
  },
}
...

// some.js
...

const stylesContainer = document.getElementById('dynamic-styles');
const frame = document.getElementById('someID');
const frameHead = frame.contentWindow.document.head;

[...stylesContainer.children].forEach(styleNode => {
  const newStyle = document.createElement('style');
  newStyle.textContent = styleNode.textContent;

  frameHead.appendChild(newStyle);
});

Я не проверял приведенный выше фрагмент, но знаю, что концепция работает. Я чувствую, что это все понятно.

Возможно, есть лучший способ сделать это, но я еще недостаточно изучил это, чтобы понять это. Было бы неплохо иметь возможность заставить веб-пакет создавать отдельные пакеты стилей, чтобы каждый сконфигурированный кадр мог просто автоматически лениво загружать свой собственный выделенный пакет css

...