在React应用程序上，如何将CSS样式应用于iframe加载的src内容？
我有一个应用程序正在加载外部内容，但是样式确实过时了，我想覆盖它。
下面是示例：（请注意，我用一些伪数据替换了src的{{1}}内容，但是问题仍然相同。
<iframe/>这是一个code sandbox，说明了我的问题。
在沙盒示例中，我想将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。
答案 0 :(得分：1)
通常，您可以使用JavaScript进行此操作：
document.querySelector('iframe').contentWindow.document.querySelector("h1#firstHeading").style.color = "red";
但是，跨域iframe不允许这样做。
错误：阻止了原点为“ ...”的框架访问跨原点框架。
答案 1 :(得分：0)
此问题不是特定于React的，在How to apply CSS to iframe?处得到了回答。
总体而言，尽管可能存在一些黑客和变通办法，但是除非您可以控制要嵌入的网站或网站放宽了CORS设置，否则没有可靠的解决方案。