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

@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 может быть ограничено.