使用 CSS 影响 iframe 内的 div 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/583753/
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
Using CSS to affect div style inside iframe
提问by
Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?
是否可以仅使用 CSS 更改位于页面上 iframe 内的 div 样式？
回答by Diodeus - James MacFarlane
You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.
你需要 JavaScript。这与在父页面中执行相同，除了您必须在 JavaScript 命令前加上 iframe 的名称。
Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.
请记住，同源策略适用，因此您只能对来自您自己的服务器的 iframe 元素执行此操作。
I use the Prototypeframework to make it easier:
我使用Prototype框架使其更容易：
frame1.$('mydiv').style.border = '1px solid #000000'
or
或者
frame1.$('mydiv').addClassName('withborder')
回答by mmattax
In short no.
总之没有。
You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.
您不能将 CSS 应用于 iframe 中加载的 HTML，除非由于跨域资源限制，您可以控制 iframe 中加载的页面。
回答by Eugene Rosenfeld
Yes. Take a look at this other thread for details: How to apply CSS to iframe?
是的。看看这个其他线程的详细信息： How to apply CSS to iframe?
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);
回答by Riyaz Hameed
You can retrieve the contents of an iframefirst and then use jQueryselectors against them as usual.
您可以先检索 a 的内容，iframe然后jQuery像往常一样对它们使用选择器。
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
Good Luck!
祝你好运！
回答by Justin Lucente
The quick answer is: No, sorry.
快速回答是：不，抱歉。
It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.
仅使用 CSS 是不可能的。您基本上需要控制 iframe 内容以对其进行样式设置。有一些方法使用 javascript 或您选择的网络语言（我已经阅读了一些，但我自己并不熟悉）来动态插入一些所需的样式，但是您需要直接控制 iframe 内容，听起来就像你没有。
回答by Priyank Gupta
Use Jquery and wait till the source is loaded, This is how I have achieved(Used angular interval, you can use javascript setInterval method):
使用Jquery并等待源加载，这是我实现的（使用角度间隔，您可以使用javascript setInterval方法）：
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
回答by adamj
Apparently it can be done via jQuery:
显然它可以通过jQuery完成：
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
回答by Al W
probably not the way you are thinking. the iframe would have to <link>in the css file too. AND you can't do it even with javascript if it's on a different domain.
可能不是你想的那样。iframe 也必须<link>在 css 文件中。如果它在不同的域上，即使使用 javascript 也无法做到。
回答by Cole Busby
A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.
一种黑客式的做事方式就像尤金所说的。我最终遵循了他的代码并链接到我的页面自定义 Css。对我来说的问题是，使用 twitter 时间线，您必须对 twitter 进行一些回避以稍微覆盖他们的代码。现在我们有了一个带有 css 的滚动时间线，IE 更大的字体，适当的行高，并使滚动条隐藏的高度大于它们的限制。
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
回答by Wahab Ahmed
Just add this and all works well:
只需添加这个，一切正常：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
