Переопределить стиль тела для содержимого в iframe

Как я могу контролировать фоновое изображение и цвет элемента body внутри iframe? Обратите внимание: встроенный элемент body имеет класс, а iframe - это страница, которая является частью моего сайта.

Причина, по которой мне это нужно, это то, что мой сайт имеет черный фон, назначенный телу, а затем белый фон, назначенный для div, содержащих текст. Редактор WYSIWYG использует iframe для встраивания контента при редактировании, но он не включает div, поэтому текст очень трудно читать.

Тело iframe когда в редакторе имеет класс, который не используется нигде, поэтому я предполагаю, что это было помещено туда, поэтому такие проблемы можно было бы решить. Однако, когда я применяю стили к class.body они не переопределяют стили, применяемые к телу. Странно то, что стили появляются в Firebug, поэтому я не знаю, что происходит!

Спасибо

UPDATE. Я пробовал решение @mikeq добавить стиль к классу, который является классом body. Это не работает при добавлении в таблицу стилей главной страницы, но она работает при добавлении Firebug. Я предполагаю, что это связано с тем, что Firebug применяется ко всем элементам страницы, тогда как CSS не применяется в iframe. Означает ли это, что добавление css после загрузки окна с помощью JavaScript будет работать?

Ответы

Ответ 1

Iframe - это "дыра" на вашей странице, которая отображает другую веб-страницу внутри нее. Содержимое iframe не имеет какой-либо формы или не является частью вашей родительской страницы.

Как указывали другие, ваши варианты:

предоставить файл, который загружается в iframe, необходимый CSS
если файл в iframe принадлежит к тому же домену, что и ваш родитель, то вы можете получить доступ к DOM документа в iframe от родителя.

Ответ 2

Нижеследующее работает только в том случае, если содержимое iframe относится к одному и тому же родительскому домену.

Следующий сценарий jquery работает для меня. Протестировано в Chrome и IE8. Внутренний iframe ссылается на страницу, которая находится в том же домене, что и родительская.

В этом конкретном случае я скрываю элемент со специальным классом во внутреннем iframe.

В принципе, вы просто добавляете элемент "style" в "head" внутреннего iframe.

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

Ответ 3

Вы не можете изменить стиль страницы, отображаемой в iframe, если у вас нет прямого доступа и, следовательно, права собственности на исходные файлы html и/или css.

Это означает, что XSS (Скрипты для кросс-сайтов)

Ответ 4

An iframe имеет другую область видимости, поэтому вы не можете получить к ней доступ к стилю или изменить его содержимое с помощью javascript.

В основном это "другая страница".

Единственное, что вы можете сделать, это отредактировать свой собственный CSS, потому что с вашим глобальным CSS вы ничего не можете сделать.

Ответ 5

Переопределить другой домен `iframe` CSS

Используя часть SimpleSam5 answer, я достиг этого с помощью нескольких фреймов чата Tawk (их интерфейс настройки, но мне нужны дальнейшие настройки).

В этом конкретном iframe, который появляется на мобильных устройствах, мне нужно было скрыть значок по умолчанию и поместить одно из моих фоновых изображений. Я сделал следующее:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

У меня нет домена Tawk, и это сработало для меня, поэтому вы можете это сделать, даже если оно не из одного и того же родительского домена (несмотря на комментарий Джереми Беккера Сэм отвечает).

Ответ 6

В этом коде используется ванильный JavaScript. Он создает новый элемент <style>. Он устанавливает текстовое содержимое этого элемента как строку, содержащую новый CSS. И он добавляет этот элемент непосредственно в заголовок документа 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);

Ответ 7

Если у вас есть контроль над страницей, на которой размещается iframe и страница iframe, вы можете передать параметр запроса в iframe...

Здесь приведен пример добавления класса в iframe на основе того, является ли хостинг-сайт мобильным...

Добавление iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl );

Внутри 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");
}

Ответ 8

У меня есть блог, и мне было очень трудно выяснить, как изменить размер встроенной сущности. Почтовый менеджер позволяет только писать текст, размещать изображения и вставлять HTML-код. Макет блога сам по себе отзывчивый. Он построен с Wix. Однако встроенного HTML нет. Я много читал о том, как невозможно изменить размеры компонентов внутри тела сгенерированных фреймов. Итак, вот мое предложение:

Если у вас есть только один компонент внутри вашего iFrame, то есть ваша сущность, вы можете изменить ее размер. Забудьте об iFrame.

У меня были проблемы с окном просмотра, конкретными макетами для различных пользовательских агентов, и вот что решило мою проблему:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

Логика состоит в том, чтобы установить gist (или ваш компонент) css на основе пользовательского агента. Убедитесь, что сначала идентифицировали свой компонент, прежде чем применять к селектору запросов. Не стесняйтесь посмотреть, как работает отзывчивость.

Ответ 9

Возможно, теперь это изменилось, но я использовал отдельную таблицу стилей с этим элементом:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

чтобы успешно внедрить встроенные iframe iframe... см. сообщения в блогах на этой странице.

Ответ 10

дайте телу вашей страницы iframe идентификатор (или класс, если хотите)

<html>
<head></head>
<body id="myId">
</body>
</html>

затем, также на странице iframe, назначьте фон тому в CSS

#myId {
    background-color: white;
}