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

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

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

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

Спасибо

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

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

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

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

Приведенное ниже работает только в том случае, если содержимое iframe принадлежит тому же родительскому домену.

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

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

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

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

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

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

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

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

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

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

Используя часть ответа SimpleSam5 , я добился этого с помощью нескольких фреймов чата 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'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>")
   );
};

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

Этот код использует ванильный 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);

Если у вас есть контроль над страницей, на которой размещен 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");
}

У меня есть блог, и мне было очень трудно выяснить, как изменить размер встроенной сущности. Почтовый менеджер позволяет только писать текст, размещать изображения и вставлять 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 на основе пользовательского агента. Убедитесь, что сначала идентифицировали свой компонент, прежде чем применять его к селектору запросов. Не стесняйтесь посмотреть, как работает отзывчивость .

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

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

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

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

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

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

#myId {
    background-color: white;
}