使用CSS影响iframe中的div样式


Using CSS to affect div style inside iframe

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

相关讨论

您需要JavaScript。它与父页面中的操作相同，只是必须在JavaScript命令前加上iframe名称。

请记住，应用相同的原始政策，因此您只能对来自您自己的服务器的iframe元素执行此操作。

我使用原型框架使其变得更容易：

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

要么

1
frame1.$('mydiv').addClassName('withborder')
相关讨论

简而言之，没有。

您不能将CSS应用于iframe中加载的HTML，除非由于跨域资源限制而可以控制iframe中加载的页面。

相关讨论

是。看一下其他线程以了解详细信息：
如何将CSS应用于iframe？

1
2
3
4
5
var cssLink = document.createElement("link");
cssLink.href="style.css";  
cssLink.rel ="stylesheet";  
cssLink.type ="text/css";  
frames['frame1'].document.body.appendChild(cssLink);
相关讨论

您可以先检索iframe的内容，然后照常对它们使用jQuery选择器。

1
2
3
4
5
$("#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)); });

祝好运！

相关讨论

快速的答案是：不，对不起。

仅使用CSS是不可能的。基本上，您需要控制iframe内容才能设置其样式。有一些方法可以使用javascript或您选择的网络语言(我已经读过一些，但是对我不太熟悉)来动态插入一些所需的样式，但是听起来您需要直接控制iframe内容像你没有。

使用Jquery并等待源加载完毕，
这就是我实现的方式(使用角度间隔，可以使用javascript setInterval方法)：

1
2
3
4
5
6
7
8
9
10
11
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);
相关讨论

显然，可以通过jQuery完成：

1
2
3
4
$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

相关讨论

可能不是您的思维方式。 iframe也必须在css文件中为。而且，即使它位于其他域中，也无法使用javascript来做到这一点。

相关讨论