在 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
.
最佳答案
通常,您会使用 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.
关于javascript - React - 如何将 CSS 样式应用于 iframe 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54116282/