Sovrascrivi lo stile del corpo per il contenuto 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 class e l’ iframe è una pagina che fa parte del mio sito.

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

Il corpo iframe quando nell’editor ha una class che non viene utilizzata da nessun’altra parte, quindi presumo che ciò sia stato messo lì, quindi problemi come questo potrebbero essere risolti. Tuttavia, quando applico gli stili su class.body , 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 @ mikeq di aggiungere uno stile alla class che è la class del corpo. Questo non funziona se aggiunto al foglio di stile della pagina principale, ma funziona quando aggiunto a Firebug. Presumo che ciò avvenga perché Firebug è applicato a tutti gli elementi della pagina mentre il CSS non è applicato all’interno degli iframe. Questo significa che aggiungere il css dopo il caricamento della finestra con JavaScript funzionerebbe?

Un iframe è un ‘buco’ nella tua pagina che mostra un’altra pagina web al suo interno. Il contenuto dell’iframe non è in nessuna forma o forma parte della pagina principale.

Come altri hanno affermato, le tue opzioni sono:

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

Il seguente funziona solo se il contenuto dell’iframe proviene dallo stesso dominio padre.

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, sto nascondendo un elemento con una class specifica nell’iframe interno.

Fondamentalmente, basta aggiungere un elemento ‘stile’ alla ‘testa’ dell’iframe interno.

 $('iframe').load( function() { $('iframe').contents().find("head") .append($("")); }); 

Non è ansible 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 per fermare XSS (Cross Site Scripting)

Un iframe ha un altro ambito, quindi non puoi accedervi per modificarlo o modificarne il contenuto con javascript.

È fondamentalmente “un’altra pagina”.

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

Sovrascrivi un altro dominio iframe CSS

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

In questa particolare iframe che appare sui dispositivi mobili, avevo bisogno di hide 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( $("") ); }; 

Non posseggo alcun dominio di Tawk e questo ha funzionato per me, quindi puoi farlo anche se non è dello stesso dominio dei genitori (nonostante il commento di Jeremy Becker sulla risposta di Sam).

Questo codice utilizza JavaScript di vaniglia. Crea un nuovo 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 la pagina dell’iframe, puoi passare un parametro di query all’iframe …

Ecco un esempio per aggiungere una class 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("
"); $("#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"); } 

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 scrivere con successo gli iframe di youtube incorporati … guarda i post del blog in questa pagina .

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

      

quindi, anche all’interno della pagina dell’iframe, assegna uno sfondo a quello in CSS

 #myId { background-color: white; }