Как добавить css в iframe c другим доменом?
Как добавить css в iframe c другим доменом?
1 ответ
от
edyth ,
год назад
@krista
Нельзя добавить CSS стили прямо в iframe, который имеет другой домен. Это запрещено из-за политики безопасности браузера, известной как Same-Origin Policy. Она предотвращает доступ к содержимому iframe, который имеет другой домен или протокол.
Если вы хотите добавить CSS стили к iframe, вам нужно изменить документ в iframe, чтобы он ссылался на ваш CSS файл. Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html>
<html>
<head>
<style>
/* Ваши стили CSS */
</style>
</head>
<body>
<iframe src="https://www.example.com"></iframe>
<script>
var iframe = document.querySelector('iframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var link = iframeDocument.createElement('link');
link.href = 'styles.css';
link.rel = 'stylesheet';
iframeDocument.head.appendChild(link);
</script>
</body>
</html>
|
В этом примере мы создаем ссылку (link) на наш CSS файл внутри документа iframe и добавляем его в голову (head) iframe. Помните, что домен, на который ссылается src в iframe, должен разрешать загрузку внешних ресурсов через заголовок Access-Control-Allow-Origin.
15