Html 使用一个css文件更改iframe中的主体背景颜色_Html_Css_Iframe

Html 使用一个css文件更改iframe中的主体背景颜色

html css iframe

Html 使用一个css文件更改iframe中的主体背景颜色,html,css,iframe,Html,Css,Iframe,使用iframe从我的Web空间调用站点，使用一个带有主体{background color:#222}的css文件 iframe src也使用这个CSS文件。问题是iframe中的主体需要另一种背景颜色尝试有什么想法或建议吗？在iframe包含的页面中，链接另一个样式表，然后更改您希望更改的所有CSS样式。我假设iframe占用您站点的较小部分。在这种情况下，我建议您只需使用与加载的iframe大小相同的div，并为该div提供适当的背景颜色或：在iframe页面的源中包含样式属性： &

使用iframe从我的Web空间调用站点，使用一个带有

主体{background color:#222}

的css文件

iframe src也使用这个CSS文件。问题是iframe中的主体需要另一种背景颜色

尝试

有什么想法或建议吗？

在iframe包含的页面中，链接另一个样式表，然后更改您希望更改的所有CSS样式。

我假设iframe占用您站点的较小部分。在这种情况下，我建议您只需使用与加载的iframe大小相同的div，并为该div提供适当的背景颜色

或：在iframe页面的源中包含样式属性：

<head>
    <style>body {background-color:#COLOR}</style>
</head>


正文{背景色：#颜色}

这个问题类似于。基本上，您可以使用jQuery来更改iframe中的CSS属性

$('#yourIframe').contents().find('body').css({
    background-color: '#333333'
});

编辑： 当iframe加载时，您可能需要添加：

$('#yourIframe').load(function(){ 
    $(this).contents().find('body').css({
        background-color: '#333333'
    });
});

我用过这个，它对我有用。（而且很简单！）

在CSS文件中放入：

iframe{背景色：橙色；}

只要把“橙色”换成你需要的任何颜色。就这样

享受吧

请记住，Javascript只能修改与站点来源相同的iframe的属性，否则会出现安全错误

协议、域和端口必须匹配。

使用Javascript，我们可以为Iframe添加背景色

 var x = document.getElementById("myframe");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = "red";

Reference

我想避免使用2个css文件您是否尝试过向iframe添加一个类，然后通过.class>body{style:style}引用它，只有当iframe来自相同的父域时才有效，这是因为相同的源策略。这是一个关键的安全机制，可以防止有人加载iframe中的任何站点，并在那里更改内容以达到其他目的。只有当iframe来自同一父域时，它才起作用

 var x = document.getElementById("myframe");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = "red";