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




iframe without src (18)

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


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


В качестве альтернативы вы можете использовать технологию CSS-in-JS, например, ниже lib:

https://github.com/cssobj/cssobj

Он может вставлять JS-объект как CSS в iframe, динамически


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

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


Другие ответы здесь, похоже, используют ссылки jQuery и CSS.

Этот код использует ванильный JavaScript. Он создает новый элемент <style> . Он устанавливает текстовое содержимое этого элемента как строку, содержащую новый CSS. И он добавляет этот элемент непосредственно в заголовок документа iframe.

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

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


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

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


Здесь есть две вещи внутри домена

  1. Секция iFrame
  2. Страница загружена внутри iFrame

Поэтому вы хотите сгладить эти два раздела следующим образом:

1. Стиль для раздела iFrame

Он может использовать стиль CSS с таким уважаемым id или именем class . Вы можете просто создать стиль в своих родительских листах стилей.

<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") 
cssLink.rel  = "stylesheet"; 
cssLink.type = "text/css"; 
cssLink.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" }
     ));

Когда вы говорите «doc.open ()», это означает, что вы можете написать любой тег 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();

Моя компактная версия :

<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. Добавлено также здесь ...

<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>

Следующие работали для меня.

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

Существует замечательный скрипт, который заменяет узел самой версией iframe. Демо- версия CodePen

Примеры использования:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

Хорошо, я выполнил следующие шаги:

  1. Div с классом для хранения iframe
  2. Добавьте iframe в div .
  3. В файле CSS,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Это работает в IE 6. Если вы работаете в других браузерах, проверьте!


Я встретил эту проблему с Google Calendar . Я хотел стилизовать его на более темном фоне и сменить шрифт.

К счастью, 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 end.)

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

Удачи!


Я нашел другое решение, чтобы поместить стиль в основной html, как это

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

а затем в iframe это сделать (см. js onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

и в js

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

Это может быть не лучшее решение, и его, безусловно, можно улучшить, но это еще один вариант, если вы хотите сохранить тег «style» в родительском окне


использование может попробовать следующее:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);


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

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




iframe