如何控制iframe中body元素的背景圖片和顏色？注意，嵌入的body元素有一個類，iframe是我的站點的一部分。

我需要這樣做的原因是，我的網站有一個黑色背景分配給正文，然后白色背景分配給包含文本的div。WYSIWYG編輯器在編輯時使用iframe來嵌入內容，但是它不包括div，所以文本很難閱讀。

當在編輯器中時，iframe的主體有一個沒有在其他地方使用的類，所以我假設它被放在那里，這樣這樣的問題就可以解決了。然而，當我將樣式應用于class.body時，它們不會覆蓋應用于body的樣式。奇怪的是，這些風格確實出現在Firebug中，所以我不知道發生了什么！

謝謝

更新-我已經嘗試了@mikeq的解決方案，在類中添加一個樣式，這個類就是body的類。這在添加到主頁面的styleshe et時不起作用，但在添加Firebug時起作用。我假設這是因為Firebug應用于頁面上的所有元素，而CSS沒有應用于iframes中。這是否意味著用JavaScript在窗口加載后添加css可以工作？

僅當iframe內容來自相同的父域時，以下內容才有效。

下面的代碼適合我。在Chrome和IE8上測試。內部iframe引用了與父頁面位于同一域的頁面。

在這個特殊的例子中，我在內部iframe中隱藏了一個具有特定類的元素。

基本上，您只需將一個樣式元素附加到框架中加載的文檔的head部分:

frame.addEventListener("load", ev => {
    const new_style_element = document.createElement("style");
    new_style_element.textContent = ".my-class { display: none; }"
    ev.target.contentDocument.head.appendChild(new_style_element);
});

也可以使用link元素代替style來引用樣式表資源。

iframe是頁面中的一個“洞”,在里面顯示另一個網頁。iframe的內容不在父頁面的任何形狀或表單中。

正如其他人所說，您的選擇是:

為iframe中加載的文件提供必要的CSS 如果iframe中的文件與父級來自同一個域，那么您可以從父級訪問iframe中文檔的DOM。 除非您直接訪問并擁有源html和/或css文件，否則您不能更改iframe中顯示的頁面樣式。

這是為了阻止XSS(跨站腳本)

這段代碼使用普通的JavaScript。它創建了一個新的& ltstyle & gt元素。它將該元素的文本內容設置為包含新CSS的字符串。并將該元素直接附加到iframe文檔的頭部。

但是，請記住，不允許訪問從其他來源加載的文檔元素(出于安全原因)——當從嵌入框架的頁面的瀏覽上下文中嘗試訪問時，iframe元素的contentDocument將被計算為null。

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

通過使用SimpleSam5的部分答案，我用一些Tawk的聊天iframes實現了這一點(他們的定制界面很好，但我需要進一步定制)。

在這個顯示在移動設備上的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的域名，這為我工作，因此你可以這樣做，即使它不是來自同一個父域(盡管杰里米·貝克爾對山姆的答案的評論)。

iframe有另一個作用域，所以您不能用javascript訪問它來設置樣式或更改它的內容。

基本就是“另一頁”。

你唯一能做的就是編輯它自己的CSS，因為用你的全局CSS你什么也做不了。

這里的技巧是分配一個全局css變量給你的主體，用新的顏色監聽消息，然后一旦收到消息就改變全局css變量。

我用的是angular，但是它應該可以和純javascript一起工作

我的用例是在保存之前，在iframe中向用戶展示顏色變化會如何影響他的網站

域A

@ViewChildren('iframeContainer') iframeContainer: QueryList<ElementRef>

sendDataToIframe(
  data = {
      type: 'colorChange',
      colors: {primary: '#000', secondary: '#fff'},
  },
): void {
  if (this.targetUrl)
    this.iframeContainer.first.nativeElement.contentWindow.postMessage(data) // You may use document.getElementById('iframeContainer') instead
}

域B

acceptedEditOrigins = [
  'https://my.origine.ccom', // Be sur to have a correct origin, to avoid xss injecto: https://en.wikipedia.org/wiki/Cross-site_scripting
]

constructor() {
// Listen to message
window.addEventListener('message', (event) => this.receiveMessage(event), false)
}

receiveMessage(event: MessageEvent) {
  if (this.acceptedEditOrigins.includes(event.origin))
    switch (event.data.type) {
      case 'colorChange': {
        this.setWebsiteConfigColor(event.data.colors)
      }
    }
}

setWebsiteConfigColor(colors: WebsiteConfigColors) {
  if (colors) {
    const root = document.documentElement
    for (const [key, value] of Object.entries(colors)) {
       root.style.setProperty(`--${key}`, value) // --primary: #000, --secondary: #fff
    }
  }
}

body {
  background-color: var(--primary);
}

如果您控制了承載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");
}

對于一個iframe，您可以這樣做:

document.querySelector('iframe').contentDocument.body.style.backgroundColor = '#1e1e2d';

如果您要處理多個iframe:

document.querySelectorAll('iframe').forEach((iframe) => {
    iframe.contentDocument.body.style.backgroundColor = '#1e1e2d';
});

也許現在已經改變了，但是我對這個元素使用了一個單獨的樣式表:

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

給你的iframe頁面的主體一個ID(或者類，如果你愿意的話)

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

然后，同樣在iframe的頁面中，給CSS中的頁面分配一個背景

#myId {
    background-color: white;
}