Как добавить css в iframe c другим доменом?

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

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

Как добавить css в iframe c другим доменом?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от edyth , 5 месяцев назад

@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.