Google Documenti iFrame: Come personalizzare il CSS di un programma integrato di Google Docs iFrame

Question

ho questo codice di un iframe visualizzazione di una documentazione documento Google:

<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;"> 

    <iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe> 

</div> 

L'iFrame grandi opere e visualizzare il seguente iFrame:

Ora voglio cambiare lo sfondo grigio come mostrato nell'immagine in alto in un colore di sfondo bianco, ho cercato una soluzione e ho trovato this, ma non funziona, lo sfondo è diventato bianco (con il mio css personalizzato) ma i documenti di google non funzionavano e mostrava un messaggio che diceva io "qualcosa è andato storto" all'interno dell'iFrame.

Qualcuno sa come posso cambiare il colore di sfondo grigio?

MODIFICA Funziona su Google Chrome e Opera ma non su Firefox o Safari.

Answer 1

Non posso dire con certezza se questo è il problema o meno, ma, poiché appare in modo diverso nei vari browser, sono incline a credere che sia una questione di normalizzazione/ripristino dei CSS. This answer ha uno script per farlo e molti altri sono nei commenti, quindi consiglio di provarlo.

Answer 2

seguenti punti si possono notare in questo scenario per quanto riguarda lo styling dei iframe:

1. Non è possibile lo stile l'iframe caricato da un altro dominio (dominio Croce).
2. Un aggiramento è lì per disegnare solo il blocco iframe (non contenuto iframe) dando il CSS incorporato al tag iframe usato.
3. Puoi trovare un trucco per questo recuperando prima il contenuto nel tuo dominio/server e poi servendo l'iframe da lì per renderlo dallo stesso dominio e quindi stylable usando il normale CSS e javascript.

seguito collegamento ha maggiori dettagli ed esempi di script che possono essere utilizzati in questo scenario: How to apply CSS to iframe?