У меня есть простая страница, на которой есть несколько разделов iframe (для отображения RSS ссылок). Как я могу применить тот же формат 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);
Я встретил эту проблему с Google Календарь. Я хотел, чтобы стиль его на темный фон и шрифт изменить.
К счастью, URL-адрес из кода встраивания имел никаких ограничений на прямой доступ, так и с помощью PHP-функции функции file_get_contents
можно получить в
весь контент на странице. Вместо того, чтобы вызвать URL-адрес в Google, то можно вызвать php-файл, расположенный на вашем сервере, экс. google.php
, который будет содержать оригинальный контент с изменениями:
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
Добавить путь к вашей таблице стилей:
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
(Это будет разместить стилей последний раз перед закрывающим тегом "голова".)
Указать базовый URL-адрес формы исходного URL-адреса в случае, если CSS и JS называются относительно:
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
Файл в финал google.php должно выглядеть так:
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;
Затем измените код для вставки в окне iframe
к:
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></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);
Обратите внимание, что в зависимости от того, какой браузер вы используете, это может работать только на страницах, обслуживаемых одним и тем же доменом.
var $head = $("#eFormIFrame").contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: url,
type: "text/css"
}));
Вот как применить CSS код без использования в <ссылка>
, чтобы загрузить дополнительный файл стилей.
var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
'#banner{display:none}; ' +
'</style>';
jQuery(head).append(css);
Это скрывает баннер на странице фрейма. Спасибо за ваши предложения!
Если вы управляете страницей в iframe, как сказал hangy, самый простой подход - создать общий файл CSS с общими стилями, а затем просто ссылаться на него с ваших html-страниц.
В противном случае вам вряд ли удастся динамически изменить стиль страницы, находящейся в iframe, с внешней страницы. Это связано с тем, что браузеры ужесточили защиту кросс-фреймовых dom-сценариев из-за возможного использования для подмены и других взломов.
Этот учебник может предоставить вам больше информации о скриптинге iframe в целом. About cross frame scripting объясняет ограничения безопасности с точки зрения IE.
Выше с небольшим изменением работы:
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 на главной странице может быть, вы должны рассмотреть вопрос о замене в `<iframe в> с помощью AJAX загруженного содержимого. Это сейчас больше для SEO, когда поисковые роботы умеют выполнять JavaScript.
Это в jQuery пример, который включает в себя следующий HTML-страницу в документ. Это гораздо более SEO-дружественные, чем элемент iframe. Для того, чтобы быть уверенным, что поисковые системы не индексировать включены страницу, просто добавьте его запретить в robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript"></script>
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
Вы также можете включить jQuery напрямую из Google: http://code.google.com/apis/ajaxlibs/documentation/ - это означает, что автоматического включение новых версий и некоторые значительное увеличение скорости. Кроме того, означает, что вы должны доверять им поставлять вам просто с jQuery ;)
Следующие работал для меня.
var iframe = top.frames[name].document;
var css = '' +
'<style type="text/css">' +
'body{margin:0;padding:0;background:transparent}' +
'</style>';
iframe.open();
iframe.write(css);
iframe.close();
Развивая приведенное выше решение jQuery, чтобы справиться с любой задержки в загрузке содержимого рамки.
$('iframe').each(function(){
function injectCSS(){
$iframe.contents().find('head').append(
$('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
);
}
var $iframe = $(this);
$iframe.on('load', injectCSS);
injectCSS();
});
Мой компактное исполнение:
<script type="text/javascript">
$(window).load(function () {
var frame = $('iframe').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find('head');
if (frmHead != null) {
frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
});
</script>
Однако, иногда элемент iframe
не готов на загружается окно, поэтому есть необходимость в использовании таймер.
Готовый к использованию код (с таймером):
<script type="text/javascript">
var frameListener;
$(window).load(function () {
frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
var frame = $('iframe').get(0);
if (frame != null) {
var frmHead = $(frame).contents().find('head');
if (frmHead != null) {
clearInterval(frameListener); // stop the listener
frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
//frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
}
}
}
</script>
...и jQuery ссылке:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
использовать можете попробовать это:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Другие ответы здесь, кажется, использовать jQuery и CSS ссылки.
Этот код использует ванили на JavaScript. Он создает новый <стиль и GT;
элемент. Он задает текстовое содержимое этого элемента, чтобы быть строкой, содержащей новый CSS. И он добавляет, что элемент непосредственно в iframe в документ's голова.
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'.some-class-name {' +
' some-style-name: some-value;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
Когда вы говорите "и док.открыть()" это означает, что вы можете написать тег html в iframe, так что вы должны написать все основные теги HTML-страницы и, если вы хотите иметь в CSS ссылку в iframe в голову только писать в iframe с помощью CSS ссылки в нем. Я дам вам пример:
doc.open();
doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');
doc.close();
Вы не сможете укладывать их в iframe таким образом. Мое предложение было бы использовать серверные скрипты (на PHP, ASP или Perl скрипт) или найти онлайн сервис, который преобразует канал для кода JavaScript. Единственный другой способ сделать это было бы, если вы можете сделать на сервере, включить.
В случае если у вас есть доступ к iframe на странице и хотите другой CSS, чтобы применить на нем только, когда вы загрузите его через iframe на Вашей странице, вот я нашла решение для такого рода вещи
это работает, даже если окно iframe загружается другой домен
проверить О метод postMessage()
план, отправьте CSS в iframe как сообщение, как
iframenode.postMessage('h2{color:red;}','*');
*
, чтобы отправить это, независимо от того, что домен это в iframe
и получить сообщение в iframe и добавить полученное сообщение(CSS) для того, что голова документа.
код для добавления в iframe страницы
window.addEventListener('message',function(e){
if(e.data == 'send_user_details')
document.head.appendChild('<style>'+e.data+'</style>');
});
Я нашел другое решение, чтобы положить стиль в основной HTML-код такой
<style id="iframestyle">
html {
color: white;
background: black;
}
</style>
<style>
html {
color: initial;
background: initial;
}
iframe {
border: none;
}
</style>
а потом в iframe сделать это (см. нагрузки на JS)
<iframe onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>
и в JS
<script>
ifstyle = document.getElementById('iframestyle')
iframe = top.frames["log"];
</script>
Может быть, это не лучшее решение, и это, безусловно, может быть улучшена, но это другой вариант, если вы хотите сохранить и "Стиль" и тег в родительское окно
Здесь существует две вещи внутри домена
Итак, вы хотите, чтобы стиль этих двух разделов следующим образом:
1. Стиль для раздела окна iframe
Его стиль с помощью CSS с уважением идентификатор
или класс
имя. Вы можете просто стиль его в родительских таблиц стилей.
<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>
<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>
2. Стиль страницы, загруженной в iframe
Эти стили могут быть загружены из родительской страницы с помощью JavaScript
var cssFile = document.createElement("link")
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFile.href = "iFramePage.css";
затем установить, что CSS-файл в раздел уважаемый окне iframe
//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile);
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);
Здесь вы можете отредактировать Главы части страницы внутри iframe, используя этот способ также
var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
$("<link/>",{
rel: "stylesheet",
href: urlPath,
type: "text/css" }
));
Мы можем вставить тег в теге iframe. Опубликовано также здесь...
<style type="text/css" id="cssID">
.className
{
background-color: red;
}
</style>
<iframe id="iFrameID"></iframe>
<script type="text/javascript">
$(function () {
$("#iFrameID").contents().find("head")[0].appendChild(cssID);
//Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
});
</script>