CSS to iFrame: Как Изменить CSS в iFrame

Добавление CSS стилей на родительской странице не работает для тегов iFrame. Из данного руководства вы узнаете, как с помощью JavaScript изменить CSS стили в iFrame, а также как добавить новые (подключить с помощью link).

Пусть у нас есть iFrame с id="iframeName".

<iframe id="iframeName" src="./iframe.html"></iframe>

Чтобы добавить новые стили для содержимого iFrame, используем следующий JavaScript код:

window.onload = () => {
    let iframeName = document.getElementById("iframeName");
    let iframeContent = iframeName.contentDocument;
    iframeContent.body.innerHTML = iframeContent.body.innerHTML + "<style>.iframe-css{color: #d92909}</style>";
}

Используя jQuery:

$("#iframeName").on("load", () => {
    let iframeHead = $("#iframeName").contents().find("head");
    let iframeCSS = "<style>.iframe-css{color: #e91905}</style>";
    $(iframeHead).append(iframeCSS);
});

Если необходимо добавить в iFrame много CSS стилей, то данный подход не очень удобен. Рассмотрим, как можно подключить новые файлы стилей в теге <head>

Добавление CSS файлов в iFrame

Чтобы добавить новый файл, используем следующий код:

// Добавление css файла в IFRAME
window.onload = () => {
    // создаём новый тег "link" для iFrame и заполняем его "href", "rel" и "type"
    let iframeLink = document.createElement("link");

    iframeLink.href = "fileName.css"; // css файл для iFrame
    iframeLink.rel = "stylesheet";
    iframeLink.type = "text/css";

    // вставляем в [0] - индекс iframe
    frames[0].document.head.appendChild(iframeLink);
}

С помощью jQuery:

// Вставка CSS в iFrame link
$("#iframeName").on("load", () => {
    let iframeHead = $("#iframeName").contents().find("head"); // находим "head" iFrame
    let newLink = $("link"); // создаём тег "link" и далее заполняем атрибуты

    $("link").attr("href", "fileName.css");
    $("link").attr("rel", "stylesheet");
    $("link").attr("type", "text/css");

    $(iframeHead).append(newLink); // вставляем в наш iFrame
});

Таким образом мы создали тег <link> и затем заполнили его атрибуты. Теперь в этом CSS файле вы можете писать все необходимые стили для содержимого iFrame.

Данный способ работает, если iframe находится на вашем домене.