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 находится на вашем домене.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (3)
- Антон
// вставляем в [0] - индекс iframe frames[0].document.head.appendChild(iframeLink);Окей, подскажите, а как получить индекс iframe?
- Only to top
В консоли браузера:
console.log(window.frames);
- Дэн
Здравствуйте! Большое спасибо за статью. Пока не получается повторить. Подскажите пожалуйста, на вот таком примере, как через CSS можно убрать внизу формы надпись "Создано пользователем с помощью..."
