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

Question

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

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

示例波纹管：（请注意，我用一些虚拟数据替换了 , 的src内容<iframe/>，但是，问题仍然相同。

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);

这是一个代码沙箱，说明了我的问题。

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

Answer 1

通常，您可以使用 JavaScript 执行此操作：

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

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

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