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

Question

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

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

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

Спасибо

ОБНОВЛЕНИЕ - Я пробовал решение @ mikeq о добавлении стиля к классу, который является классом тела.Это не работает при добавлении в таблицу стилей главной страницы, но работает при добавлении с Firebug.Я предполагаю, что это потому, что Firebug применяется ко всем элементам на странице, тогда как CSS не применяется внутри фреймов.Означает ли это, что добавление CSS после загрузки окна с JavaScript будет работать?

Answer 1

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

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

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

По сути,вы просто добавляете элемент style к заголовку внутреннего iframe.

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

Answer 2

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

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

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

Answer 3

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

Это остановка XSS (межсайтовый скриптинг)

Answer 4

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

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

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

Answer 5

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

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

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

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's 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>")
   );
};

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

Answer 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);

Answer 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 ); 

Внутри рамки:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

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

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

Answer 9

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

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

, чтобы успешно стилизовать встроенные фреймы YouTube ... см. сообщения блога на этой странице ,

Answer 10

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

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

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

#myId {
    background-color: white;
}