Можно ли стилизовать содержимое междоменного iframe?
При встраивании виджета Kickstarter в мой веб-сайт я бы хотел, чтобы виджет соответствовал моему сайту лучше. Вы можете найти код для встраивания, если зайдете на страницу проекта Kickstarter и нажмете ссылку "встраивать" под изображением / видео. Вот пример, который вы можете использовать для тестирования:
<iframe frameborder="0" height="420" scrolling="no" src="https://www.kickstarter.com/projects/1973403569/never-lose-anything-again/widget/card.html?v=2" width="220"></iframe>
Очевидно, что я могу изменить ширину и высоту прямо в HTML-теге iframe, но когда я пытаюсь стилизовать что-либо еще для элементов, содержащихся в iframe, используя CSS, это не имеет никакого эффекта. Я предполагаю, что это из-за внешних сценариев, которые определяют стиль виджета при создании, потому что, если я редактирую CSS после загрузки страницы через браузер, эффекты регистрируются правильно. Я пытался использовать функцию jQuery $(документ).ready(fuction(){}); включить некоторые JQuery для изменения CSS, но это также не удалось.
РЕДАКТИРОВАТЬ: После некоторого дополнительного чтения, кажется, что проблема в том, что междоменные iframes действительно не любят, когда им говорят, что делать. Я прочитал несколько ответов, и, похоже, у всех разные представления об этом. Я не могу сказать, есть или нет способ сделать это на самом деле. Кто-нибудь знает надежный способ доступа к CSS междоменного iframe?
3 ответа
Для стилизации iframe сначала необходимо использовать метод содержимого. Может использоваться при загрузке DOM.
$('iframe').on('load', function(){
$('iframe').contents().find('form').attr('target','_blank');
$('iframe').css('min-height','1px !important;');
$('iframe').contents().find('form').css('background-color','#f7f7f7 !important;')
$('iframe').contents().find('form').addClass('awesome');
});
Гугл корспрокси. Он может использоваться для доступа к iframe, когда CORS его блокирует. Во всяком случае, это скорее взлом, чем решение, и это может не сработать в вашем случае
! важный после того, как ваш CSS должен переопределить CSS, используемый в виджете.