Google Документы для iframe: как настроить CSS для встроенного Google Документы для iframe

У меня есть этот код iframe, отображающий документ google docs:

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

iFrame отлично работает и отображает следующий iFrame: Screenshot

теперь я хочу изменить серый фон, как показано на рисунке выше, на белый цвет фона, я искал решение, и я придумал этой, но он не работает, фон стал белым (с моим пользовательским css), но документы google не работали, и он отобразил сообщение о том, что" что-то пошло не так " внутри iFrame.

кто-нибудь знает, как я могу поменять серый цвет фона ?

редактировать Он работает на Google Chrome и Opera, но не на Firefox или Safari.

7
google-docs google-docs-api iframe

2 ответов

Я не могу сказать наверняка, является ли это проблемой или нет, но, поскольку она появляется по-разному в разных браузерах, я склонен полагать, что это вопрос нормализации/сброса CSS. ответ есть скрипт для этого, и еще несколько в комментариях, поэтому я рекомендую проверить его.

5

в этом сценарии можно отметить следующие моменты, касающиеся стиля iframes:

  1. вы не можете стилизовать iframe, загруженный из другого домена (Кросс-домена).
  2. работа вокруг есть, чтобы стилизовать только блок iframe (не содержимое iframe), предоставив встроенный CSS используемому тегу iframe.
  3. вы можете найти хак для него, сначала извлекая контент в вашем домене / сервере, а затем обслуживая iframe оттуда, чтобы сделать его из того же домена и следовательно, стилизованный с использованием обычных CSS и javascript.

следующая ссылка имеет более подробную информацию и примеры сценариев, которые могут быть использованы в этом сценарии:как применить CSS к iframe?

2