Question

我必须在iframe中设置样式。

<html>
 <head>
   <link href="url/to/my/custom.css"></link>
 </head>
 <body>
    ......
    <iframe class="webform-frame">...</iframe>
 </body>
</html>

在我的custom.css中，我已经尝试使用.webform-frame h5 { color: #f00; }，但它不起作用。

iframe是由某些JavaScript生成的（我无法访问它）。

知道如何在iframe中设置样式吗？

Answer 1

如果你想定位iframe，即边框，边框颜色，填充或边距，那么使用它会定位你的iframe：

iframe.webform-frame {
   /* Styles */
}

如果您尝试将iframe内加载的标记定位为不可能的标记。

注意：您可以控制一些内容，例如使框架背景透明等等......

编辑：想在这里添加seamless属性说明，正如塞巴斯蒂安所说，但是支持很差，你应该忽略这样做。也不要编辑未经页面所有者事先许可的任何iframed页面

Answer 2

有一个名为seamless iframe的新HTML 5功能，它可能符合您的要求：

[...]它表示iframe元素的浏览上下文的呈现方式使其看起来像是包含文档的一部分[...]

<iframe src="iframe.html" seamless></iframe>

但是，目前它的浏览器支持很差（我认为只是Webkit）。因此，对于今天的大多数用例来说，它不是一个好的解决方案。但也许是为了你或未来的一些读者。

更新：浏览器支持似乎是even worse today，所以这不是今天或不久的将来的解决方案。

Answer 3

使用jquery，您可以访问iframe中的内容使用以下语法：

$('iframe.webform-frame').contents().find('h5').css("color","#f00");

iframe中的样式内容

3 个答案: