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

是。有关详细信息，请查看此其他主题： How to apply CSS to 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

可能不是你想的那样。 iframe也必须在css文件中<link>。如果它位于不同的域中，即使使用javascript也无法实现。

Answer 8

显然可以通过jQuery完成：

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

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

Answer 9

一种黑客行事方式就像Eugene说的那样。我最终关注他的代码并链接到我的自定义Css页面。对我来说问题是，有了Twitter的时间线，你必须对Twitter进行一些回避以覆盖他们的代码smidgen。现在我们有一个滚动的时间表，我们的css，它。较大的字体，正确的线条高度，并使滚动条隐藏的高度超过其限制。

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Answer 10

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

参考文献：

Answer 11

只需添加即可，一切都很好：

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

Answer 12

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

Error: Request failed with status code 403
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

Answer 13

无法从客户端进行。将引发javascript错误＆＃34;错误：拒绝访问属性的权限＆＃34;文档＆＃34;＆＃34;因为Iframe不是你的酒庄的一部分。唯一的解决方案是从服务器端代码获取页面并更改所需的CSS。

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

13 个答案: