Как применить CSS к iframe?
У меня есть простая страница, на которой размещены несколько секций iframe для отображения RSS-ссылок. Как я могу применить тот же CSS-формат с основной страницы к странице, отображаемой в iframe?
5 ответ(ов)
Если содержимое iframe не полностью под вашим контролем или вы хотите получить доступ к контенту с разных страниц с разными стилями, вы можете попробовать манипулировать им с помощью JavaScript.
var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);
Имейте в виду, что в зависимости от браузера, который вы используете, это может работать только на страницах, обслуживаемых с одного и того же домена.
Вы можете использовать следующий код для добавления CSS-стиля в <head> элемента <iframe> с идентификатором eFormIFrame:
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url, // Здесь 'url' - это переменная, содержащая путь к вашему стилю
type: "text/css"
}));
Этот код сначала получает содержимое <head> целевого <iframe>, а затем добавляет в него новый элемент <link>, который ссылается на файл стилей. Обратите внимание, что url должен содержать корректный адрес вашего CSS-файла. Убедитесь, что <iframe> загружено и доступно для манипуляции в момент выполнения кода.
Вы можете применить CSS-код напрямую, не используя элемент <link> для загрузки внешнего стиля. Вот пример кода на jQuery, который выполняет эту задачу:
var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
'#banner{display:none}; ' +
'</style>';
jQuery(head).append(css);
Этот код скрывает элемент с идентификатором #banner на странице внутри iframe. Если у вас есть дополнительные вопросы или предложения, не стесняйтесь спрашивать!
Iframe в большинстве браузеров обрабатывается как отдельная HTML-страница. Если вы хотите применить тот же стиль (CSS) к содержимому iframe, просто укажите ссылку на нужный файл стилей в страницах, используемых внутри iframe.
Вышеописанное решение с небольшими изменениями работает:
var cssLink = document.createElement("link");
cssLink.href = "pFstylesEditor.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
// Вместо этого
// frames['frame1'].document.body.appendChild(cssLink);
// Делайте так
var doc = document.getElementById("edit").contentWindow.document;
// Если вы собираетесь что-то динамически записывать, сделайте это сначала
doc.open();
doc.write(myData);
doc.close();
// Затем добавьте css-ссылку
doc.body.appendChild(cssLink);
Это работает корректно, по крайней мере, в Firefox 3 и Internet Explorer 8.
Убрать границу у IFrame
Получить координаты (X,Y) HTML-элемента
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr