如何在使用“react-frame-component”库创建的 IFrame 中加载 webpack 提供的 css？

Posted 2023-02-21

【中文标题】如何在使用“react-frame-component”库创建的 IFrame 中加载 webpack 提供的 css？

【英文标题】：How to load css provided by webpack inside an IFrame created using "react-frame-component" library?

【发布时间】：2018-10-16 19:15:39

【问题描述】：

我正在尝试在 iframe 中呈现我的 React 组件。我通过使用库“react-frame-component”让它工作。问题是样式是在 iframe 之外加载的，位于“head”元素的末尾。我想将其更改为加载到“iframe”元素的“head”内。 我正在使用 Webpack 生成包含 JS 和 CSS 的包，我看到我可以通过设置选项“insertInto”来更改“style-loader”将加载样式的位置，但这会引发错误：

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 尝试包含样式时组件没有呈现。如何解决？

【问题讨论】：

您不能这样做，因此 Webpack 在较低级别处理您的 html 的原始内容，而您的 React 在客户端浏览器运行您的 javascript 之后很长时间才生成 HTML 内容。您可以创建一个<pre style="display:none" id="someId"> 并将css 放入其中。然后使用React Frame 的initialContent 属性从该

【参考方案1】：

您需要将样式加载到临时元素中作为占位符，然后使用 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);
);

我没有测试过上面的 sn-p 但我知道这个概念是有效的。我觉得它说得通。

可能有更好的方法来做到这一点，但我还没有深入研究它来弄清楚它。如果能够让 webpack 制作单独的样式包，这样每个配置的框架都可以自动延迟加载它自己的专用捆绑 css，那就太好了