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 = function() {
    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', function() {
    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 = function() {
    // создаём новый тег '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', function() {
    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.

admin
03/10/2019 18:58