iframe中的样式内容
[英]style content within an iframe
问题描述
I have to style something within an iframe. 
我必须在iframe中设置一些内容。
<html>
<head>
<link href="url/to/my/custom.css"></link>
</head>
<body>
......
<iframe class="webform-frame">...</iframe>
</body>
</html>
In my custom.css I already tried to use .webform-frame h5 { color: #f00; } 在我的custom.css中，我已经尝试使用.webform-frame h5 { color: #f00; } .webform-frame h5 { color: #f00; } but it doesn't work. .webform-frame h5 { color: #f00; }但它不工作。
The iframe is generated by some JavaScript (I have no access to it). iframe是由一些JavaScript生成的（我无法访问它）。
Any idea how I could style that stuff within that iframe? 知道如何在那个iframe中设置那些东西吗？
3 个解决方案
解决方案1
8 已采纳 2013-06-26 09:43:07
If you want to target the iframe ie the border, border color, padding, or margin, then using this will target your iframe : 如果你想定位iframe即边框，边框颜色，填充或边距，那么使用它将定位你的iframe ：
iframe.webform-frame {
/* Styles */
}
If you are trying to target the markup which is loaded inside the iframe than that's not possible. 如果您尝试定位iframe加载的标记而不是不可能的标记。
Note: You can control a few things like making the frame background transparent etc...
Edit: Would like to add
seamlessattribute explanation here, as Sebastian told, but the support is poor, you should perhaps ignore doing so.. Also do not edit any iframed pages without prior permission of the page ownerseamless属性说明，正如塞巴斯蒂安所说，但支持很差，你应该忽略这样做。也不要在没有页面所有者事先许可的情况下编辑任何iframed页面
解决方案2
6 2013-06-26 09:47:09
There is a new HTML 5 feature called seamless iframe, which perhaps does what you want: 有一个名为seamless iframe的新HTML 5功能，它可能会做你想要的：
[...] it indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document [...]
<iframe src="iframe.html" seamless></iframe>
However, for now it has very poor browser support (Webkit only I think). 但是，目前它的浏览器支持很差（我认为只是Webkit）。 So it's not a good solution for most use cases today. 因此，对于今天的大多数用例来说，它不是一个好的解决方案。 But perhaps it is for you or some readers of the future. 但也许是为了你或未来的一些读者。
Update: Browser support seems to be even worse today , so this isn't a solution today or in the near future. 更新：浏览器支持今天似乎更糟 ，所以这不是今天或不久的将来的解决方案。
解决方案3
-1 2013-06-26 11:20:46
使用jquery，您可以使用以下语法访问iframe中的内容：
$('iframe.webform-frame').contents().find('h5').css("color","#f00");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.