使用CSS影响iframe中的div样式

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

简言之，否

---

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

可能不是您的想法。iframe也必须在css文件中

。如果javascript位于不同的域上，则即使使用javascript也无法完成此操作。

您需要javascript。这与在父页面中执行相同，只是您必须在JavaScript命令前面加上iframe的名称

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

我使用该框架使其更容易：

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

或

---

快速的回答是：不，对不起

---

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

是的。有关详细信息，请查看另一个线程：

---

是的，这是可能的，尽管很麻烦。您需要将页面的HTML打印/回显到页面主体中，然后应用CSS规则更改功能。使用上面给出的相同示例，您将基本上使用一种解析方法，即在页面中查找div，然后对其应用CSS，然后将其重新打印/回显给最终用户。我不需要这个，所以我不想把这个函数编码到另一个网页的CSS中的每一个条目中，只是为了使用它

参考资料：

---

使用Jquery并等待源加载， 这就是我如何实现的（使用角度间隔，可以使用javascript setInterval方法）：

var addCssToIframe=function（）{
if（$（'#myIframe'）.contents（）.find（“head”）！=未定义）{
$（“#myIframe”）
.contents（）
.find（“head”）
.附加(
'');
$interval.cancel（addCssInterval）；
}
};
var addCssInterval=$interval（addCssToIframe，500，0，false）；

您可以首先检索

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)); });

---

祝你好运

客户端不可能。将引发javascript错误“错误：访问属性“文档”的权限被拒绝”，因为Iframe不是域的一部分。

---

唯一的解决方案是从服务器端代码获取页面并更改所需的CSS。

一种类似于Eugene所说的黑客方式。我最终遵循他的代码并链接到我的自定义Css页面。对我来说，问题是，有了twitter的时间线，你必须绕开twitter来覆盖他们的代码。现在，我们有了一个滚动的时间轴，我们的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

---

显然，这可以通过jQuery完成：

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

$（'iframe'）.load（函数（）{
$（'iframe'）.contents（）.find（“head”）
.append（$（“.my class{display:none；}”）；
});

---

只需添加此项，所有操作都很好：

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

---

结合不同的解决方案，这对我来说是有效的

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

---

---

看到我的这个问题了吗？它很相似，但如果帧来自另一台服务器，我们不能改变样式吗？这是正确的。Iframe内容受相同的域策略约束。如果它来自你的域，你可以控制它，如果不是，你就被锁在外面。这可以防止各种基于Iframe的页面劫持。这不是一个“仅CSS”的解决方案，但对我来说已经足够好了+1这不是CSS。你能举个例子说明如何做到这一点吗？你的意思是像

？frame1是iframe的id吗？是的，frame1是iframe的id。这不是CSS。如果我们在iframe中加载不同的域，我们就不能这样做。

frame1

是iframe名称，而不是id。这是真的，但不能真正帮助人们给出一个例子，说明这是如何在2018年出现的？我记得我曾经从外部配置iframe的样式。我试图将css应用于脚本呈现的iframe，但仍然不起作用。为什么不使用iframe加载的事件？这个答案在内容上是正确的，但与JavaScript有关，而问题与css有关。答案可能是您需要使用JavaScript，但您没有这样说。答案还假设iFrame中的内容来自不同的域，但情况并非总是如此。最后，确切的信息因浏览器而异。关于CORS的更多信息可能重复：问题特别提出“仅使用CSS”。考虑到这一点，您的答案是错误的。这不是CSS。不起作用：未捕获的DomeException:未能从“HtmlFrameElement”读取“contentDocument”属性：阻止源代码为“”的框架访问跨源框架。@tubbo，在您的情况下，您不能嵌入未经授权的网站，防止XSS。这只适用于那些寻找自己问题的人，而不是黑客：由于Chrome浏览器中的同源策略，pYou不能再使用它了。错误消息：

Uncaught-DOMException:未能从“HtmlFrameElement”读取“contentDocument”属性：阻止具有源****的帧访问跨源帧。

@adamj，我们可以更改iframe元素的覆盖样式表吗？如果是，请添加脚本。如果您没有使用域外其他网页的内容，这是一个很好的答案，但如果您正在处理与您自己的网页相关的内容，这是一个完美的答案。就像渲染图像上传到iFrame一样，这是一个很好的解决方案。谢谢@adamjnot sur

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

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

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