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

Question

У меня есть простая страница с несколькими разделами iframe (для отображения ссылок RSS). Как применить такой же формат CSS с главной страницы к странице, отображаемой в iframe?

Answer 1

Редактировать: Это не работает междоменный, если не установлен соответствующий 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);

Answer 2

Я столкнулся с этой проблемой с Календарем 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);

(Это сделает вашу таблицу стилей последней перед тэгом head.)

Укажите базовый 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>

Удачи!

Answer 3

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

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

Answer 4

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

Answer 5

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

Answer 6

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

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

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

Answer 7

Вот как применить код CSS напрямую без использования <link> для загрузки дополнительной таблицы стилей.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

Это скрывает баннер на странице iframe. Спасибо за ваши предложения!

Answer 8

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

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 как минимум

Answer 9

Если вы хотите повторно использовать 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;)

Answer 10

У меня сработало следующее.

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();