Как можно поменять стили внутри iframe?

Пользователь

от richie_mayert , в категории: JavaScript , 7 месяцев назад

Как можно поменять стили внутри iframe?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от abel , 7 месяцев назад

@richie_mayert 

Для того чтобы изменить стили внутри iframe, вам понадобится доступ к содержимому iframe. Вот несколько способов:

  1. Если iframe находится на том же домене, что и основной документ, вы можете получить доступ к содержимому iframe с помощью contentWindow:
1
2
3
4
5
6
7
8
// Получение доступа к iframe
var iframe = document.getElementById('my-iframe');

// Получение доступа к содержимому iframe
var iframeContent = iframe.contentWindow.document;

// Изменение стилей внутри iframe
iframeContent.getElementById('my-element').style.color = 'red';


  1. Если iframe находится на другом домене, вам потребуется использовать postMessage для взаимодействия между основным документом и содержимым iframe. В основном документе:
1
2
3
4
5
// Получение доступа к iframe
var iframe = document.getElementById('my-iframe');

// Отправка сообщения в iframe
iframe.contentWindow.postMessage('change styles', 'https://example.com');


В содержимом iframe вы должны прослушивать сообщения:

1
2
3
4
5
6
7
// Пример обработчика события слушателя сообщений в iframe
window.addEventListener('message', function(event) {
  if (event.origin === 'https://example.com' && event.data === 'change styles') {
    // Изменение стилей внутри iframe
    document.getElementById('my-element').style.color = 'red';
  }
});


Важно учесть, что для этого вам потребуется некоторое взаимодействие и совместная работа с владельцем iframe или изменение настроек безопасности, если iframe находится на другом домене.