如何将CSS应用于iframe？

Question

如何将CSS应用于iframe？

htmlcssiframerss

1204

我有一个简单的页面，其中包含一些iframe部分（用于显示RSS链接）。我如何将主页面的相同CSS格式应用于在iframe中显示的页面？

- John

79

只有当 iframe 的域名与父级相同时才可能实现。 - gawpertron

14

gawpertron，我想澄清一下，你的意思是说如果我使用来自我无法控制的其他域的iFrame内容，那么我就无法控制该内容的CSS样式吗？ - Ville M

你能列出一个链接给我们看看我们的更改吗？ - user3376708

5

域名、端口和协议必须保持一致，子域名也不可用。 - lee penkman

28个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- K.Suthagar · Answer 1

这里，域内有两个事物：

iFrame 部分
加载在 iFrame 内的页面

因此，您希望按照以下方式为这两个部分设计样式：

1. iFrame 部分的样式

可以使用 CSS 样式来设计具有相应 id 或 class 名称的样式。您也可以在父样式表中直接为其设置样式。

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. 为iFrame内加载的页面添加样式

可以使用Javascript从父页面加载这些样式。

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css";

然后将该CSS文件设置为相应的iFrame部分。

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

在这里，您也可以使用此方法编辑iFrame内页面的头部部分

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

- Mateusz Winnicki · Answer 2

我认为最简单的方法是添加另一个div，与iframe在同一位置，然后将其z-index设置得比iframe容器更大，这样你就可以轻松地为自己的div设置样式。如果需要单击它，则只需在自己的div上使用pointer-events:none，这样在需要单击它时iframe仍将起作用。希望对某些人有所帮助;)

- Diego Fortes · Answer 3

这是我在生产环境中的做法。需要注意的是，如果iframe属于其他网站，它将会触发CORS错误并且无法工作。

    var $iframe =  document.querySelector(`iframe`);
    var doc = $iframe.contentDocument;

    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);

在某些情况下，您可能还想将load事件附加到iframe：

var $iframe =  document.querySelector(`iframe`);

$iframe.addEventListener("load", function() {
    var doc = $iframe.contentDocument;
    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);
});

- Jeeva · Answer 4

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

- James Yang · Answer 5

作为替代方案，您可以使用 CSS-in-JS 技术，比如下面的库：

https://github.com/cssobj/cssobj

它可以动态地将JS对象注入到iframe中作为CSS。

- karlisup · Answer 6

有一个神奇的脚本，它可以用iframe版本替换节点。 CodePen 演示

使用示例：

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

- T.Todua · Answer 7

这只是一个概念，但不要在没有进行安全检查和过滤的情况下实现它！否则脚本可能会黑掉您的网站！

回答：如果您控制目标站点，可以设置接收器脚本如下：

1）使用style参数设置iframe链接，例如：

http://your_site.com/target.php?color=red

（最后一个短语是由urlencode函数编码的a{color:red}）。

2）将接收页面target.php设置为以下内容：

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

- JannuD · Answer 8

好的，我已经按照以下步骤进行了操作：

创建一个带有类的 div 元素来容纳 iframe。
将 iframe 添加到 div 中。
在 CSS 文件中，

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

在IE 6中可以工作。应该在其他浏览器中也能工作，请检查！