使用CSS影响iframe中的div样式

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

您需要JavaScript。除了必须在JavaScript命令前加上iframe名称之外，这与在父页面中执行此操作相同。

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

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

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

要么

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

简而言之，没有。

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

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

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

您可以先检索内容，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)); });

祝好运！

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

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

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

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

显然可以通过jQuery完成：

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

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

尤金（Eugene）说过，这是一种有点破烂的做事方式。我最终遵循了他的代码，并链接到该页面的自定义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

只需添加它，一切都很好：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

是的，虽然很麻烦，但还是有可能的。您需要将页面的HTML打印/回显到页面的主体中，然后应用CSS规则更改功能。使用上面给出的相同示例，您实际上将使用一种解析方法来查找页面中的div，然后将CSS应用于该div，然后将其重新打印/回显给最终用户。我不需要这个，所以我不想为了另一个功能而将该功能编码到另一个网页的CSS中的每个项目中。

参考文献：

• IFRAME的打印内容
• 使用PHP或JavaScript访问和打印HTML源代码
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

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

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

从客户端不可能。由于Iframe不属于您的域，因此将引发JavaScript错误“错误：拒绝访问属性“文档”的权限”。唯一的解决方案是从服务器端代码获取页面并更改所需的CSS。