Как применить CSS к iframe?

Редактирование: Это не работает перекрестный домен, если соответствующее заголовок CORS не установлено.

здесь существует две разных вещи: стиль iframe блока и стиль страницы встраиваются в iframe. Можно установить стиль iframe блока обычный путь:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

стиль страницы, встроенной в iframe, должен быть или установлен включением его на дочерней странице:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Или это может быть загружено из родительской страницы с JavaScript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

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

Если содержание 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);

Примечание, которое в зависимости от того, какой браузер Вы используете это, могло бы только работать на страницах, подаваемых от того же домена.

При управлении страницей в iframe как hangy сказал, самый легкий подход должен создать совместно использованный файл CSS с общими стилями, то просто связываются с ним от страниц HTML.

Иначе маловероятно, что Вы будете в состоянии динамично изменить стиль страницы от внешней страницы в Вашем iframe. Это вызвано тем, что браузеры сжали безопасность на перекрестном кадре dom сценарии из-за возможного неправильного употребления для спуфинга и других взломов.

Это учебное руководство может предоставить Вам больше информации о сценариях iframes в целом. О перекрестном кадре, пишущем сценарий , объясняет ограничения безопасности с точки зрения IE.

Вы не сможете разработать содержание iframe этот путь. Мое предложение состояло бы в том, чтобы использовать сценарии серверной стороны (PHP, ASP или сценарий Perl) или найти онлайн-сервис, который преобразует канал в код JavaScript. Единственный другой способ сделать это состоял бы в том, если можно сделать, серверная сторона включает.

Вышеупомянутое с небольшими изменениями работает:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

Прекрасно работает с ff3 и ie8 по крайней мере

Если вы хотите повторно использовать CSS и JavaScript с главной страницы, возможно, вам стоит подумать о замене