覆盖iframe中内容的主体样式

如何控制中的body元素的背景图像和颜色iframe？请注意，嵌入的body元素具有一个类，并且iframe是属于我的网站的页面的。

我需要这样做的原因是我的网站将黑色背景分配给正文，然后将白色背景分配给包含文本的div。所见即所得（WYSIWYG）编辑器iframe在编辑时使用来嵌入内容，但它不包含div，因此文本很难阅读。

iframe编辑器中的when 主体具有一个在其他任何地方都没有使用过的类，因此我假设将其放在那里，这样可以解决此类问题。但是，当我将样式应用于class.body它们时，不会覆盖应用于主体的样式。奇怪的是样式确实出现在Firebug中，所以我不知道发生了什么！

谢谢

更新-我尝试了@mikeq的解决方案，该解决方案为该类的类添加样式。当添加到主页的样式表时，此方法不起作用，但与Firebug一起添加时，此方法起作用。我假设这是因为Firebug应用于页面上的所有元素，而CSS没有应用于iframe。这是否意味着在使用JavaScript窗口加载后添加css可行？

iframe是页面中的一个“洞”，其中显示了另一个网页。iframe的内容不是父页面的任何形状或一部分。

正如其他人所说，您的选择是：

• 为iframe中正在加载的文件提供必要的CSS
• 如果iframe中的文件与父目录位于同一域，则可以从父目录访问iframe中的文档的DOM。

仅当iframe内容来自同一父域时，以下内容才有效。

以下jquery脚本适用于我。在Chrome和IE8上进行了测试。内部iframe引用与父页面位于同一域中的页面。

在这种情况下，我在内部iframe中隐藏了具有特定类的元素。

基本上，您只需要在内部iframe的“ head”后面附加一个“ style”元素即可。

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

您无法更改iframe中显示的页面的样式，除非您具有直接访问权限，因此拥有源html和/或css文件的所有权。

这是为了停止XSS（跨站点脚本）

一个iframe具有另一个作用域，因此您无法使用javascript来访问它的样式或内容。

基本上是“另一页”。

您唯一可以做的就是编辑自己的CSS，因为使用全局CSS不能做任何事情。

覆盖另一个域 iframe CSS

通过使用部分SimpleSam5的答案，我通过一些Tawk的聊天iframe实现了这一点（它们的自定义界面很好，但是我需要进一步的自定义）。

在移动设备上显示的特定iframe中，我需要隐藏默认图标并放置一张背景图片。我做了以下事情：

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

我不拥有Tawk的任何域名，并且对我有用，因此即使它不是来自同一父域名，您也可以这样做（尽管Jeremy Becker对Sam的回答有评论）。

此代码使用原始JavaScript。它创建一个新<style>元素。它将元素的文本内容设置为包含新CSS的字符串。并将该元素直接附加到iframe文档的头部。

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

如果您可以控制托管iframe的页面和iframe的页面，则可以将查询参数传递给iframe ...

这是一个根据托管网站是否可移动向iframe添加类的示例...

添加iFrame：

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

在iFrame内部：

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

我有一个博客，在寻找如何调整嵌入式主意尺寸时遇到很多麻烦。邮政管理器仅允许您编写文本，放置图像和嵌入HTML代码。博客布局本身就是响应式的。它是用Wix构建的。但是，嵌入式HTML不是。我读了很多关于如何调整生成的iFrame主体内部组件大小的知识。所以，这是我的建议：

如果iFrame中只有一个组件（即要点），则只能调整要点的大小。忘记iFrame。

我在视口，针对不同用户代理的特定布局方面遇到了问题，这就是解决我的问题的原因：

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

逻辑是根据用户代理设置要点（或您的组件）css。在应用到查询选择器之前，请确保先标识您的组件。随意看看响应如何工作。

也许现在已更改，但是我对此元素使用了单独的样式表：

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

成功设置嵌入式youtube iframe的样式...请参阅此页面上的博客文章。

给您iframe页面的主体一个ID（或您希望的类）

<html>
<head></head>
<body id="myId">
</body>
</html>

然后，也在iframe页面中，为CSS中的背景分配背景

#myId {
    background-color: white;
}