使用CSS来影响iframe中的div样式

是否可以仅使用CSS更改驻留在页面上iframe内的div的样式？

1> Diodeus - Ja..：

---

你需要JavaScript.它与在父页面中执行的操作相同,除非您必须在JavaScript命令前添加iframe的名称.

请记住,相同的原始策略适用,因此您只能对来自您自己的服务器的iframe元素执行此操作.

我使用Prototype框架使其更容易:

frame1.$('mydiv').style.border = '1px solid #000000'

要么

frame1.$('mydiv').addClassName('withborder')

---

那是正确的.Iframe内容受相同域策略的约束.如果它来自您的域名,您可以控制它,如果没有,您就被锁定了.这可以防止各种基于iframe的页面劫持.

---

看到我的这个问题它类似http://stackoverflow.com/questions/1962707/how-to-give-style-to-iframed-page-content-using-parent-pages-css但我们不能改变风格如果框架来自另一台服务器？

---

不完全是"仅CSS"解决方案,但对我来说足够好.+1

---

这不是CSS。

2> mmattax..：

---

总之没有.

您不能将CSS应用于iframe中加载的HTML,除非您因跨域资源限制而控制iframe中加载的页面.

---

这是事实,但并不能真正帮助人们举例说明如何做

3> Eugene Rosen..：

---

是.有关详细信息,请查看此其他主题: 如何将CSS应用于iframe？

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

---

是的,frame1是iframe的id.

---

frame1是iframe的id？

---

如果我们要在iframe中加载其他域，则无法执行此操作。

---

这不是CSS。

4> Riyaz Hameed..：

---

您可以检索第一个内容,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)); });

祝好运!

---

不起作用:未捕获DOMException:无法从'HTMLIFrameElement'读取'contentDocument'属性:阻止具有原点"http:// HOST"的帧访问跨源帧.

5> Justin Lucen..：

---

快速回答是:不,抱歉.

只使用CSS是不可能的.您基本上需要控制iframe内容才能设置样式.有些方法使用javascript或你选择的网络语言(我已经阅读了一些,但我不熟悉自己)动态插入一些所需的样式,但你需要直接控制iframe内容,它听起来就像你没有.

6> Priyank Gupt..：

---

使用Jquery并等到源加载,这是我已经实现的(使用角度间隔,你可以使用javascript setInterval方法):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);