React - 如何将 CSS 样式应用于 iframe 内容答案

【问题标题】：React - How to apply CSS styles to iframe contentReact - 如何将 CSS 样式应用于 iframe 内容
【发布时间】：2019-06-04 14:10:46
【问题描述】：

在 React 应用中，如何将 CSS 样式应用于 iframe 加载的 src 内容？

我有一个加载外部内容的应用，但样式确实过时了，我想覆盖它。

示例波纹管：（请注意，我将<iframe/> 的src 内容替换为一些虚拟数据，但是问题仍然存在。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class Frame extends React.Component {
  componentDidMount() {
    document
      .querySelector("iframe")
      .contentWindow.document.querySelector("h1#firstHeading").style.color =
      "red";
  }
  render() {
    return (
      <iframe
        title="How Can I overwrite the styles from the src content?"
        src="https://en.wikipedia.org/wiki/Herbie_Hancock"
        width="90%"
        height="500px"
        scrolling="no"
      />
    );
  }
}


function App() {
  return (
    <div className="App">
      <Frame />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个code sandbox 说明我的问题。

在沙盒示例中，我想将h1#firstHeading 颜色更改为red。

【问题讨论】：

标签： javascript html css reactjs iframe

【解决方案1】：

通常，您会使用 JavaScript：

document.querySelector('iframe').contentWindow.document.querySelector("h1#firstHeading").style.color = "red";

但是，跨域 iframe 不允许这样做。

错误：阻止具有源“...”的框架访问跨域框架。

【讨论】：

能否根据我的沙盒代码告诉我如何操作？
这个方案直接在控件上设置颜色。问题是如何将 CSS 样式应用于 Iframe

【解决方案2】：

这个问题不是 React 特定的，在 How to apply CSS to iframe? 回答。

总体而言，尽管可能存在一些 hack 和变通方法，但除非您可以控制要嵌入的网站或该网站具有宽松的 CORS 设置，否则没有可靠的解决方案。

【讨论】：

感谢您的链接。我希望了解如何实现它与 React 应用程序的连接。
这个问题是或者至少可以是特定于 React 的。链接中的答案使用硬编码样式或指向 CSS 文件的单独链接，这在 React 应用程序中可能不是这种情况。
在 react 中使用 iframe 并不简单......所以这个问题是特定于反应的