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

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

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

Answer 1

通常，您会使用 JavaScript 执行此操作:

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

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

Error: Blocked a frame with origin "..." from accessing a cross-origin frame.