假设我在托管 site2.com并拥有 site2.com/frame.html文件很简单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site2.com frame</title>
<style>
body { background-color: yellowgreen; }
</style>
</head>
<body id="site2-frame-body">
<h1>This is site2.com frame for 3rd party use</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
site1.com希望通过 iframe 嵌入此内容像这样的元素:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site1</title>
</head>
<body>
<style>
#site2frame { border: 2px solid red; }
#site2frame-body { background-color: blue !important; }
</style>
<iframe id="site2frame"
title="Inline Frame Example"
width="300"
height="200"
src="https://site2.com:3002/frame.html">
</iframe>
</body>
</html>
site1.com 时，我在 Chrome 浏览器中得到了这个结果(即 site1.com 在这里扮演第 3 方网站的 Angular 色，而 site2.com 是托管要嵌入到其他网站 iframe 中的内容的网站):
所以
body的背景框架内的元素是yellowgreen由 site2.com/frame.html 中的样式设置.当我尝试用 blue 覆盖它时家长网站上指定的颜色 site1.com:3002这不适用。我什至将 id 选择器与 !important 一起使用属性，但不会传播到框架内容的内部。请注意，我可以设置 iframe 的样式元素本身(带有红色边框)，但这不是我的问题。那么我该如何启用它呢？是否有一些标准方法，例如启用某些 http 策略或设置某些服务器 header
site2.com告诉浏览器“请允许来自这个来源的嵌入框架的 CSS 样式”？请注意，框架内容是跨域的。注意:这个开发环境是我设置的，用于练习使用主机文件指向
site1.com和 site2.com到 127.0.0.1，我正在运行两个 node express 实例来模拟不同的服务器。
最佳答案
您无法设置第 3 方 iframe 的样式，因为它们受“Same-origin Policy”保护。 '。
话虽如此，您可以尝试将样式表的 URL 作为 GET 参数发送，并使用 site2.com/frame.html读取此参数并将其动态添加到其<head> .
例如，site1.com可以像这样创建 iframe:
<iframe id="site2frame"
title="Inline Frame Example"
width="300"
height="200"
src="https://site2.com:3002/frame.html?css=externalstylesheet.css">
</iframe>
site2.com/frame.html可以读取 GET 参数，创建一个 link带有 href 的元素设置为参数的值并将其附加到 document.head :var css = new URLSearchParams(location.search).get('css');
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href= css;
document.head.append(stylesheet);
关于javascript - 让第 3 方更改我网站 iframe 的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67692723/