gpt4 book ai didi

javascript - 让第 3 方更改我网站 iframe 的样式

转载 作者:行者123 更新时间:2023-12-04 11:09:17 25 4
gpt4 key购买 nike

假设我在托管 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>
现在说第 3 方网站名为 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 中的内容的网站):
enter image description here
所以 body的背景框架内的元素是 yellowgreensite2.com/frame.html 中的样式设置.当我尝试用 blue 覆盖它时家长网站上指定的颜色 site1.com:3002这不适用。我什至将 id 选择器与 !important 一起使用属性,但不会传播到框架内容的内部。请注意,我可以设置 iframe 的样式元素本身(带有红色边框),但这不是我的问题。
那么我该如何启用它呢?是否有一些标准方法,例如启用某些 http 策略或设置某些服务器 header site2.com告诉浏览器“请允许来自这个来源的嵌入框架的 CSS 样式”?请注意,框架内容是跨域的。
注意:这个开发环境是我设置的,用于练习使用主机文件指向 site1.comsite2.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);
Edit pedantic-euclid-m120j

关于javascript - 让第 3 方更改我网站 iframe 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67692723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com