Google Docs iFrame: Wie die CSS eines eingebetteten Google Docs iFrame

Question

Ich habe diesen Code eines iframe Anzeigen einer Google Docs-Dokument anpassen:

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

Der iFrame funktioniert gut und zeigen folgende iFrame:

Jetzt möchte ich den grauen Hintergrund ändern, wie im Bild oben in eine weiße Hintergrundfarbe gesehen, ich habe nach einer Lösung gesucht und ich komme this, aber es funktioniert nicht, der Hintergrund wurde weiß (mit meine benutzerdefinierte css) aber Google Docs hat nicht funktioniert und es zeigte eine Nachricht zu sagen Ich habe "etwas schief gelaufen" im iFrame.

Weiß jemand, wie kann ich die graue Hintergrundfarbe ändern?

EDIT Es funktioniert auf Google Chrome und Opera, aber nicht auf Firefox oder Safari.

Answer 1

Ich kann nicht mit Sicherheit sagen, ob dies das Problem ist oder nicht, aber weil es in verschiedenen Browsern anders aussieht, bin ich geneigt zu glauben, dass es eine CSS-Normierung/Zurücksetzung ist. This answer hat ein Skript dafür, und einige mehr sind in den Kommentaren, also empfehle ich es zu überprüfen.

Answer 2

Folgende Punkte können in diesem Szenario angemerkt werden, in Bezug auf die iframes Styling:

1. Sie können nicht die iframe Stil aus einer anderen Domäne geladen (Cross-Domain).
2. Eine Umgehung ist da, um nur den iframe-Block (kein Iframe-Inhalt) zu stylen, indem das Inline-CSS dem verwendeten iframe-Tag zugewiesen wird.
3. Sie können einen Hack dafür finden, indem Sie zuerst den Inhalt in Ihrer Domain/Server holen und dann den iframe von dort aus bedienen, um ihn aus der gleichen Domain zu machen und somit mit dem normalen CSS und Javascript zu gestalten.

Nach Link hat mehr Details und Skriptbeispiele, die in diesem Szenario verwendet werden können: How to apply CSS to iframe?