Javascript 如何使第三方网站能够将自定义CSS样式应用于包含我的内容的iframe？_Javascript_Html_Css_Http_Iframe

Javascript 如何使第三方网站能够将自定义CSS样式应用于包含我的内容的iframe？

javascript html css http iframe

Javascript 如何使第三方网站能够将自定义CSS样式应用于包含我的内容的iframe？,javascript,html,css,http,iframe,Javascript,Html,Css,Http,Iframe,假设我正在托管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: y

假设我正在托管

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

（即

site1.com

在这里扮演第三方网站的角色，而

site2.com

是承载要嵌入其他网站iframe内的内容的网站）时，我在Chrome浏览器中得到了这个结果：

因此，框架内

body

元素的背景是

yellowgreen

，由

site2.com/frame.html

中的样式设置。当我尝试用母公司网站

site1.com:3002

中指定的

blue

颜色覆盖该值时，这不适用。我甚至在

中使用了id选择器！重要

属性，但不会传播到帧内容内部。请注意，我可以设置

iframe

元素本身的样式（带有红色边框），但这不是我的问题

那么我怎样才能实现这一点呢？是否有一些标准的方法，比如启用一些http策略或设置一些服务器头

site2.com

，告诉浏览器“请允许从这个来源在嵌入式框架上设置CSS样式”？请注意，框架内容是跨原点的

注意：此开发环境由我设置，用于练习使用hosts文件将

site1.com

和

site2.com

指向127.0.0.1，我正在运行两个node express实例来模拟不同的服务器。

您不能设置第三方iFrame的样式，因为它们受“”保护

也就是说，您可以尝试将样式表的URL作为GET参数发送，并让

site2.com/frame.html

读取此参数并将其动态添加到其

中

例如，

site1.com

可以像这样创建iframe：

并且

site2.com/frame.html

可以读取GET参数，创建一个

链接

属性，将

href

设置为参数值，并将其附加到

document.head

：

var css=newurlsearchparams（newurl（location.search）.get（'css'）；
var stylesheet=document.createElement（“链接”）；
stylesheet.rel=“stylesheet”；
stylesheet.href=css；
document.head.append（样式表）；

您不能在其他站点中覆盖

iframe

样式

这可能会有所帮助。这可能有一些用处，基本前提是使用JS更改iframe css：

<!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>