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

Question

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

Answer 1

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

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

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

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

要么

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

Answer 2

总之没有.

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

Answer 3

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

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

Answer 4

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

祝好运!

Answer 5

快速回答是:不,抱歉.

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

Answer 6

使用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);

Answer 7

显然可以通过 jQuery 来完成：

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

/sf/answers/977188551/

Answer 8

结合不同的解决方案，这对我有用。

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});