Javascript 我可以将 CSS 应用于 iframe 中的元素吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3286178/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:01:53  来源:igfitidea点击:

Can I apply CSS to the elements within an iframe?

javascripthtmlcssdomiframe

提问by RadiantHex

I often see sites using iframes containing an external site, and a top frame containing JavaScript functionality for the user.

我经常看到网站使用包含外部站点的 iframe 和包含用户 JavaScript 功能的顶部框架。

e.g. user analytics software, Digg bar, etc...

例如用户分析软件、Digg bar 等...



Any tips for experimenting on something similar? =) Would be awesome to know

尝试类似的东西的任何提示?=) 知道会很棒

回答by Pointy

No, not from outsidethe iframe. An <iframe>is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

不,不是来自iframe之外。An<iframe>是它自己的世界。如果域等匹配,则 Javascript 可以进出通信,并且可以(如果它想)将 CSS 注入子框架。

If the <iframe>contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content overthe frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.

如果<iframe>包含来自不同域的内容,您几乎无能为力。父页面控制框架的大小和是否可见,可以通过定位等方式将自己的内容放在框架上,但不能直接影响实际框架内容的渲染方式。

回答by Rishikesh Chaudhari

If it is of same domain you can interfere the iframe content using javascript as follows.. assume id of iframe is IframeId. And you want to change color of element having id "elementId".

如果它属于同一个域,您可以使用 javascript 干扰 iframe 内容,如下所示.. 假设 iframe 的 id 是IframeId. 并且您想更改 id 为“elementId”的元素的颜色。

$("iframe").load(function() {
   var frameContents;
   frameContents = $("#IframeId").contents(); 
   frameContents.find("#elementId").css("color","#fff");
});