Sostituisci lo stile del corpo per i contenuti in un iframe

Come posso controllare l'immagine di sfondo e il colore di un elemento del corpo all'interno di un iframe? Nota, l'elemento body incorporato ha una classe e iframeè di una pagina che fa parte del mio sito.

Il motivo per cui ho bisogno di questo è che il mio sito ha uno sfondo nero assegnato al corpo, e quindi uno sfondo bianco assegnato alle div che contengono testo. Un editor WYSIWYG utilizza un iframeper incorporare contenuto durante la modifica, ma non include il div, quindi il testo è molto difficile da leggere.

Il corpo del iframequando nell'editor ha una classe che non è usata da nessun'altra parte, quindi suppongo che questo sia stato messo lì, così che problemi come questo potrebbero essere risolti. Tuttavia, quando applico gli stili, class.bodyquesti non sovrascrivono gli stili applicati al corpo. La cosa strana è che gli stili appaiono in Firebug, quindi non ho idea di cosa stia succedendo!

Grazie

AGGIORNAMENTO - Ho provato la soluzione di @ mikeq di aggiungere uno stile alla classe che è la classe del corpo. Questo non funziona se aggiunto al foglio di stile della pagina principale, ma funziona se aggiunto con Firebug. Suppongo che ciò avvenga perché Firebug viene applicato a tutti gli elementi della pagina, mentre il CSS non viene applicato all'interno di iframe. Questo significa che l'aggiunta del CSS dopo il caricamento della finestra con JavaScript funzionerebbe?

Un iframe è un 'buco' nella tua pagina che mostra al suo interno un'altra pagina web. Il contenuto dell'iframe non ha alcuna forma o parte della pagina principale.

Come altri hanno affermato, le tue opzioni sono:

• dare al file che viene caricato nell'iframe il CSS necessario
• se il file nell'iframe proviene dallo stesso dominio del tuo genitore, puoi accedere al DOM del documento nell'iframe dal genitore.

Di seguito funziona solo se il contenuto iframe proviene dallo stesso dominio principale.

Il seguente script jquery funziona per me. Testato su Chrome e IE8. L'iframe interno fa riferimento a una pagina che si trova sullo stesso dominio della pagina padre.

In questo caso particolare, nascondo un elemento con una classe specifica nell'iframe interno.

Fondamentalmente, aggiungi semplicemente un elemento 'style' alla 'testa' dell'iframe interno.

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

Non è possibile modificare lo stile di una pagina visualizzata in un iframe a meno che non si abbia accesso diretto e quindi la proprietà dei file html e / o css di origine.

Questo serve a fermare XSS (Cross Site Scripting)

An iframeha un altro ambito, quindi non è possibile accedervi per stile o modificarne il contenuto con JavaScript.

In pratica è "un'altra pagina".

L'unica cosa che puoi fare è modificare il proprio CSS, perché con il tuo CSS globale non puoi fare nulla.

Sostituisci un altro dominio iframe CSS

Usando parte della risposta di SimpleSam5 , ho raggiunto questo obiettivo con alcuni iframe di chat di Tawk (la loro interfaccia di personalizzazione va bene ma avevo bisogno di ulteriori personalizzazioni).

In questo particolare iframe che appare sui dispositivi mobili, avevo bisogno di nascondere l'icona predefinita e posizionare una delle mie immagini di sfondo. Ho fatto quanto segue:

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

Non possiedo alcun dominio di Tawk e questo ha funzionato per me, quindi puoi farlo anche se non appartiene allo stesso dominio principale (nonostante il commento di Jeremy Becker sulla risposta di Sam).

Questo codice utilizza JavaScript vaniglia. Crea un nuovo <style>elemento. Imposta il contenuto del testo di quell'elemento come una stringa contenente il nuovo CSS. E aggiunge quell'elemento direttamente alla testa del documento 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);

Se hai il controllo della pagina che ospita l'iframe e della pagina dell'iframe, puoi passare un parametro di query all'iframe ...

Ecco un esempio per aggiungere una classe all'iframe in base al fatto che il sito di hosting sia mobile o meno ...

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

All'interno di 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");
}

Ho un blog e ho avuto molti problemi a scoprire come ridimensionare il mio gist incorporato. Post Manager ti consente solo di scrivere testo, posizionare immagini e incorporare codice HTML. Il layout del blog è reattivo. È costruito con Wix. Tuttavia, HTML incorporato non lo è. Ho letto molto su come sia impossibile ridimensionare i componenti all'interno del corpo degli iFrame generati. Quindi, ecco il mio suggerimento:

Se hai un solo componente all'interno di iFrame, ovvero il tuo contenuto, puoi ridimensionare solo il contenuto. Dimentica l'iFrame.

Ho avuto problemi con viewport, layout specifici per diversi user agent e questo è ciò che ha risolto il mio problema:

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

La logica è impostare gist (o il tuo componente) in base al programma utente. Assicurati di identificare prima il componente, prima di applicare al selettore di query. Sentiti libero di dare un'occhiata a come funziona la reattività .

Forse è cambiato ora, ma ho usato un foglio di stile separato con questo elemento:

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

per definire correttamente iframe di YouTube incorporati ... vedere i post del blog in questa pagina .

dai un ID al corpo della tua pagina iframe (o classe se lo desideri)

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

quindi, anche all'interno della pagina iframe, assegna uno sfondo a quello nel CSS

#myId {
    background-color: white;
}