Как стилизовать загружаемый контент iframe?

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

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

Как стилизовать загружаемый контент iframe?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от lilla.herman , 7 месяцев назад

@shayna.buckridge 

Стилизацию загружаемого контента в iframe можно осуществить с помощью CSS и JavaScript.

  1. С использованием CSS:
  • Определите класс или идентификатор для iframe, например my-iframe.
  • Примените необходимые стили к этому элементу, например:
1
2
3
4
5
6
7
8
<style>
.my-iframe {
   width: 100%;
   height: 500px;
   border: none;
}
</style>
<iframe class="my-iframe" src="https://example.com"></iframe>


  • Замените https://example.com на URL вашего iframe.
  1. С использованием JavaScript:
  • Получите доступ к iframe в JavaScript с помощью querySelector или getElementById.
  • Примените стили непосредственно к iframe.contentDocument для изменения стилей внутри загружаемого содержимого iframe.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<iframe id="my-iframe" src="https://example.com"></iframe>
<script>
const iframe = document.getElementById("my-iframe");
const iframeContent = iframe.contentDocument;

if (iframeContent) {
  const body = iframeContent.querySelector("body");
  body.style.backgroundColor = "lightblue";
  // Дополнительные стили можно применить здесь
}
</script>


  • Снова замените https://example.com на URL вашего iframe.
  • Помните, что когда URL разных доменов, доступ к его содержимому с помощью JavaScript может подвергаться ограничениям в соответствии с политикой безопасности браузера.


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