Как применить CSS к внутреннему элементу iframe через родительское окно CSS-класс?

У меня есть родительская (основная) страница с несколькими разделами iframe. И я хочу применить стиль css к внутреннему элементу iframe.

Когда я прихожу к Google, я нашел много сообщений, относящихся к этой теме, но все они предлагают использовать jquery/javascript для применения CSS к внутренним элементам.

Можно ли применить CSS-стиль к внутреннему элементу iframe через родительское окно (главная страница) CSS-класс?

(Все области iframe совпадают с родительскими)

Ответы

Ответ 1

Вы не можете напрямую применять стили к внутреннему элементу IFrame через класс CSS родительского окна, даже если его домен совпадает с родительским.

As, (Весь домен iframe совпадает с родительским).

Самое лучшее, что вы можете сделать, - добавить свою основную таблицу стилей в IFrame с помощью javascript или jquery.

 $(document).ready(function(){
        $('#myIframe').load(function(){
            $('#myIframe')
                    .contents().find("body")
                    .html("test iframe");
            $('#myIframe')
                .contents().find("head")
                .append($('<link rel="stylesheet" type="text/css" href="style.css">')
            );
        });
    });

Ответ 2

Если все ваши CSS находятся во внешних файлах, что-то вроде этого может работать в вашем iframe.

<script>
window.onload = function() {
    Array.prototype.forEach.call(window.parent.document.querySelectorAll("link[rel=stylesheet]"), function(link) {
        var newLink = document.createElement("link");
        newLink.rel  = link.rel;
        newLink.href = link.href;
        document.head.appendChild(newLink);
    });
};
</script>

В основном он запрашивает родительский элемент для всех таблиц стилей, а затем добавляет ссылки на iframe с теми же ссылками. Если iframe и родительская страница не находятся на одном и том же месте на вашем сервере, вам необходимо соответствующим образом управлять href.

Кроме того, код выше, вероятно, работает только в более новых браузерах.