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


165

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

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

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

Дякую

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


1
Можливий дублікат Як застосувати CSS до iframe?
2540625

Хоча в iframe нічого не можна торкатися, завантаження цієї URL-адреси на Ajax у баночку <div>може бути часом вирішення (якщо це дає CORS-Header, що дозволяє це) ... (і "санітизувати" завантажені дані шляхом regexp на так. Так, всі хакі ...)
Френк Нокк

Ви можете використовувати javascript, якщо домени сторінок збігаються, але чому б просто не помістити блок стилів у HTML внутрішньої сторінки, щоб змінити потрібні кольори? Просто додайте більше селекторів у своєму заміні або використовуйте важливі! якщо все інше не вдасться, замінити будь-які кольорові стилі, які ви хочете, лише на цій одній сторінці ...
OG Sean

Відповіді:


112

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

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

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

251

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

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

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

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

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

4
@ SimpleSam5 Чи можете ви надати альтернативу Javascript (без використання Jquery)?
Kamalakannan J

1
@sincerekamal Ось код без необхідності jQuery: jsfiddle.net/9g9wkpon Вам просто потрібно знати, що дефісні властивості CSS записуються у camelCase у JavaScript, як у моєму прикладі. :)
Dennis98

2
jquery.js? ver = 1.12.4: 2 Uncaught DOMException: Не вдалося прочитати властивість "contentDocument" з "HTMLIFrameElement": заблоковано кадр з початковим файлом " xxxxxxxxx.com " від доступу до кадру з перехресним походженням.
Олексій Станес

2
@AlexStanese, як заявляє jeremy, це працює лише в тому випадку, якщо сторінка iframe надходить з того самого сервера, що і батьківська сторінка ... що, як правило, означає, що вам ніколи не потрібно працювати з javascript ... просто додайте CSS на іншу сторінку на першому місці.
DA.

@KamalakannanJ вам навіть не потрібно використовувати Javascript. Просто відредагуйте сторінку, що знаходиться в iFrame, і поставте туди CSS.
DA.

25

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

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


Що ви маєте на увазі під «прямим доступом»? Сторінка в iframe - це з мого сайту, все це один домен.
jd6699

2
Добре, тоді вам потрібно буде змінити вихідний файл на вашому сайті (ви не можете змінювати будь-який вміст у iframe) - тому якщо iframe вказує на mysite.com/test.html, тоді вам потрібно буде змінити test.html безпосередньо .. .
Майлз Грей

1
Не можете? За умовами ОП каже, що можна. Наприклад, його внутрішня URL-адреса iframe така ж, як і його батьківський сайт, тому він повинен мати доступ до DOM ok з будь-яким смаком javascript, який вам подобається ...
OG Sean

@Myles Grey Wrong. Ви можете змінити вміст в iframe з його батьківської сторінки, якщо він знаходиться в одному домені, як з JavaScript, так і з CSS.
Кевін М

8

У iframeіншої області застосування, тому ви не можете отримати доступ до неї до стилю або змінити його вміст за допомогою JavaScript.

Це в основному "інша сторінка".

Єдине, що ви можете зробити - це відредагувати свій власний CSS, оскільки зі своїм глобальним CSS ви нічого не можете зробити.


Так, ви можете, за допомогою JavaScript. Зауважте, що він найкраще працює з URL-адресою iframe та батьківською URL-адресою, що розділяє один і той же домен. Але, я думаю, ви праві, вказуючи, що це можна зробити лише за допомогою CSS на сторінці всередині iframe.
OG Sean

8

Замініть інший домен 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, і це працювало на мене, тому ви можете це зробити, навіть якщо це не з того самого батьківського домену (незважаючи на коментар Джеремі Беккера щодо відповіді Сема).


18
Я підозрюю, що це працює лише тому, що люди в Таук це явно дозволили.
Адвокати

@CPHPython Можливо, ти можеш мені допомогти. Подивіться на це: stackoverflow.com/questions/60923168/…
Людина з успіху

7

Цей код використовує ванільний 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
Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.Боюся, це не вийде
Майк

1

Якщо ви керуєте сторінкою, на якій розміщується 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");
}

Можливо, ти можеш мені допомогти. Подивіться на це: stackoverflow.com/questions/60923168/…
Людина з успіху

0

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


-3

Можливо, це змінилося зараз, але я використав окрему таблицю стилів з цим елементом:

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

щоб успішно вбудовувати вбудовані youtube iframes ... дивіться публікації блогу на цій сторінці .


4
Хоча це посилання може відповісти на питання, краще включити сюди суттєві частини відповіді та надати посилання для довідки. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться.
Шайлосний іслам

4
Це стосується лише самого елемента iFrame - питання задається конкретно щодо вмісту iFrame, який наразі неможливо змінити лише через CSS.
pwdst

@ShaifulIslam - саме це і сталося. Подання відповіді Тімс марно.
Алекс Фокслей

-24

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

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

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

#myId {
    background-color: white;
}

Це дивно. Ваше рішення працює для мене, коли я додаю його на сторінку за допомогою firebug, але не працює, якщо воно є у звичайному файлі css сторінки. Чи може це бути частиною вашого коментаря: "якщо припустити, що сторінку в iFrame вам редагувати?" Я не розумів, що ти мав на увазі під цим. Спасибі
jd6699

Я маю на увазі під тим, чи є сторінка, яку ви завантажуєте в iFrame зі свого сайту та під вашим контролем? або із зовнішнього сайту ви не можете редагувати джерело, щоб включити цей id / клас.
mikeq

Це з мого сайту, але, як це робиться редактором, змінити позначку, яку витягнуто, не буде легко.
jd6699

ps Я не мав на увазі додати id = "myId" на головну сторінку, але на сторінку в iFrame. Таким чином ви можете націлити тіло сторінки iFrame з іншим стилем до вашої головної сторінки. Ви також посилаєтесь на файл CSS на своїх сторінках iFrame, чи не ви. Сторінку, завантажену в iFrame, потрібно розглядати як абсолютно незалежну сторінку. Якщо ви завантажуєте саме цю сторінку у веб-браузер, чи вона має правильний стиль?
mikeq

Я насправді не впевнений, де "сторінка", як не вся сторінка, яку використовує редактор. Дякую за вашу допомогу, я думаю, я розумію, як це все працює.
jd6699
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.