CSS 覆盖 iframe 中内容的正文样式

Override body style for content in an iframe

提问by jd6699

How can I control the background image and colour of a body element within an iframe? Note, the embedded body element has a class, and the iframeis of a page that is part of my site.

如何控制 .body 元素的背景图像和颜色iframe？请注意，嵌入的 body 元素有一个类，iframe它属于我网站的一部分。

The reason I need this is that my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an iframeto embed content when editing, but it doesn't include the div, so the text is very hard to read.

我需要这个的原因是我的网站有一个黑色背景分配给正文，然后一个白色背景分配给包含文本的 div。WYSIWYG 编辑器iframe在编辑时使用 an来嵌入内容，但它不包含 div，因此文本很难阅读。

The body of the iframewhen in the editor has a class that isn't used anywhere else, so I'm assuming this was put there so problems like this could be solved. However, when I apply styles to class.bodythey don't override the styles applied to body. The weird thing is that the styles do appear in Firebug, so I've no idea what's going on!

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

Thanks

谢谢

UPDATE - I've tried @mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added to the main page's stylesheet, but it does work when added with Firebug. I'm assuming this is because Firebug is applied to all elements on the page whereas the CSS is not applied within iframes. Does this mean that adding the css after window load with JavaScript would work?

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

采纳答案by DA.

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

iframe 是页面中的一个“洞”，用于在其中显示另一个网页。iframe 的内容不属于您的父页面的任何形状或形式。

As others have stated, your options are:

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

• give the file that is being loaded in the iframe the necessary CSS
• if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.

• 为 iframe 中加载的文件提供必要的 CSS
• 如果 iframe 中的文件与您的父级来自同一个域，那么您可以从父级访问 iframe 中文档的 DOM。

回答by SimpleSam5

The below only works if the iframe content is from the same parent domain.

以下仅适用于 iframe 内容来自同一父域的情况。

The following jquery script works for me. Tested on Chrome and IE8. The inner iframe references a page that is on the same domain as the parent page.

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

In this particular case, I am hiding an element with a specific class in the inner iframe.

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

Basically, you just append a 'style' element to the 'head' of the inner iframe.

基本上，您只需将“style”元素附加到内部 iframe 的“head”。

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

回答by Myles Gray

You cannot change the style of a page displayed in an iframe unless you have direct accessand therefore ownership of the source html and/or css files.

您不能更改 iframe 中显示的页面样式，除非您可以直接访问并因此拥有源 html 和/或 css 文件的所有权。

This is to stop XSS (Cross Site Scripting)

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

回答by Alessandro Vendruscolo

An iframehas another scope, so you can't access it to style or to change its content with javascript.

Aniframe有另一个范围，因此您无法访问它以设置样式或使用 javascript 更改其内容。

It's basically "another page".

它基本上是“另一页”。

The only thing you can do is to edit its own CSS, because with your global CSS you can't do anything.

你唯一能做的就是编辑它自己的 CSS，因为使用你的全局 CSS 你什么也做不了。

回答by CPHPython

Override another domainiframeCSS

覆盖另一个域iframeCSS

By using part of SimpleSam5's answer, I achieved this with a few of Tawk's chat iframes (their customization interfaceis fine but I needed further customizations).

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

In this particular iframe that shows up on mobile devices, I needed to hide the default icon and place one of my background images. I did the following:

在这个显示在移动设备上的特定 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>")
   );
};

I do not own any Tawk's domain and this worked for me, thus you may do this even if it's not from the same parent domain (despite Jeremy Becker's commenton Sam's answer).

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

回答by 2540625

This code uses vanilla JavaScript. It creates a new <style>element. It sets the text content of that element to be a string containing the new CSS. And it appends that element directly to the iframe document's head.

此代码使用普通 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);

回答by Ben

If you have control of the page hosting the iframe and the page of the iframe, you can pass a query parameter to the iframe...

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

Here's an example to add a class to the iframe based on whether or not the hosting site is mobile...

这是一个示例，根据托管站点是否为移动设备向 iframe 添加类...

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

Inside iFrame:

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

回答by Victor R. Oliveira

I have a blogand I had a lot of trouble finding out how to resize my embedded gist. Post manager only allows you to write text, place images and embed HTML code. Blog layout is responsive itself. It's built with Wix. However, embedded HTML is not. I read a lot about how it's impossible to resize components inside body of generated iFrames. So, here is my suggestion:

我有一个博客，但在找出如何调整嵌入式 Gist 的大小时遇到​​了很多麻烦。帖子管理器只允许您编写文本、放置图像和嵌入 HTML 代码。博客布局本身就是响应式的。它是用 Wix 构建的。但是，嵌入式 HTML 不是。我阅读了很多关于如何在生成的 iFrame 的主体内调整组件大小的信息。所以，这是我的建议：

If you only have one component inside your iFrame, i.e. your gist, you can resize only the gist. Forget about the iFrame.

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

I had problems with viewport, specific layouts to different user agents and this is what solved my problem:

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

<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>

The logic is to set gist (or your component) css based on user agent. Make sure to identify your component first, before applying to query selector. Feel free to take a look how responsiveness is working.

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

回答by Tim Hymanson

Perhaps it's changed now, but I have used a separate stylesheet with this element:

也许它现在已经改变了，但我使用了一个单独的样式表和这个元素：

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

to successfully style embedded youtube iframes...see the blog posts on this page.

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

回答by mikeq

give the body of your iframe page an ID (or class if you wish)

为您的 iframe 页面的正文提供一个 ID（如果您愿意，也可以使用类）

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

then, also within the iframe's page, assign a background to that in CSS

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

#myId {
    background-color: white;
}