Перейдіть стиль тіла для вмісту в кадрі

Як я можу контролювати фонове зображення та колір елемента тіла в межах iframe? Зауважте, вбудований елемент тіла має клас, і iframeце сторінка, яка є частиною мого сайту.

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

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

Дякую

ОНОВЛЕННЯ - Я спробував рішення @ mikeq додати стиль до класу, що є класом body. Це не працює, коли додається до таблиці стилів основної сторінки, але працює, коли додається з Firebug. Я припускаю, що це тому, що Firebug застосовується до всіх елементів сторінки, тоді як CSS не застосовується у iframes. Чи означає це, що додавання CSS після завантаження вікна JavaScript працюватиме?

Iframe - це «дірка» у вашій сторінці, яка відображає іншу веб-сторінку всередині неї. Вміст iframe не має жодної форми або не є частиною вашої батьківської сторінки.

Як заявили інші, ваші варіанти:

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

Наведене нижче працює лише у тому випадку, якщо вміст iframe є з того самого батьківського домену.

Наступний сценарій jquery працює для мене. Тестовано на Chrome і IE8. Внутрішній iframe посилається на сторінку, що знаходиться на тому ж домені, що і батьківська сторінка.

У цьому конкретному випадку я ховаю елемент із певним класом у внутрішньому кадрі.

В основному, ви просто додаєте елемент "стиль" до "голови" внутрішнього кадру.

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

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

Це для того, щоб зупинити XSS (міжсайтовий сценарій)

У 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>")
   );
};

У мене немає жодного домену Tawk, і це працювало на мене, тому ви можете це зробити, навіть якщо це не з того самого батьківського домену (незважаючи на коментар Джеремі Беккера щодо відповіді Сема).

Цей код використовує ванільний 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 ); 

Всередині 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");
}

У мене є блог, і у мене було багато проблем, щоб дізнатися, як змінити розмір вбудованої суті. Диспетчер повідомлень дозволяє лише писати текст, розміщувати зображення та вставляти HTML-код. Макет блогу реагує на себе. Він побудований за допомогою Wix. Однак вбудований HTML - це не так. Я багато читав про те, як неможливо змінити розмір компонентів всередині створених iFrames. Отже, ось моя пропозиція:

Якщо у вашому 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 iframes ... дивіться публікації блогу на цій сторінці .

дайте тілу сторінки iframe ID (або клас, якщо бажаєте)

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

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

#myId {
    background-color: white;
}