Html iframe 中的样式内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17316562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style content within an iframe
提问by Safari
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; }but it doesn't work.
在我的 custom.css 中，我已经尝试使用.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 中设置样式吗？
回答by Mr. Alien
If you want to target the iframei.e the border, border color, padding, or margin, then using this will target your iframe:
如果你想定位iframeie 的边框、边框颜色、填充或边距，那么使用它将会定位你的iframe：
iframe.webform-frame {
/* Styles */
}
If you are trying to target the markup which is loaded inside the iframethan 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 owner
编辑：想
seamless在这里添加属性解释，正如塞巴斯蒂安所说，但支持很差，你可能应该忽略这样做.. 未经页面所有者事先许可，也不要编辑任何 iframe 页面
回答by Sebastian vom Meer
There is a new HTML 5 feature called seamlessiframe, which perhaps does what you want:
有一个名为无缝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 元素的浏览上下文将以使其看起来是包含文档的一部分的方式呈现 [...]
<iframe src="iframe.html" seamless></iframe>
However, for now it has very poor browser support (Webkit only I think). So it's not a good solution for most use cases today. But perhaps it is for you or some readers of the future.
但是，目前它的浏览器支持非常差（我认为只有 Webkit）。所以对于今天的大多数用例来说，这不是一个好的解决方案。但也许它是为你或未来的一些读者准备的。
Update: Browser support seems to be even worse today, so this isn't a solution today or in the near future.
回答by Vamsikrishna
Using jquery you can access the contents inside iframe using the following syntax:
使用 jquery，您可以使用以下语法访问 iframe 中的内容：
$('iframe.webform-frame').contents().find('h5').css("color","#f00");
