Как применить CSS к iframe? - PullRequest
Новая
       81

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

937 голосов
/ 20 октября 2008

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

Ответы [ 26 ]

8 голосов
/ 24 июня 2013

Расширение вышеупомянутого решения 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();
});
8 голосов
/ 21 марта 2013

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

<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>
6 голосов
/ 08 ноября 2010

Когда вы говорите «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();
5 голосов
/ 01 сентября 2017

Использование может попробовать это: 

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
5 голосов
/ 01 апреля 2009

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

3 голосов
/ 07 июля 2016

Другие ответы здесь используют ссылки 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);
2 голосов
/ 19 мая 2016

Если у вас есть доступ к странице 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>');

});
2 голосов
/ 18 марта 2015

Я нашел другое решение, чтобы поместить стиль в основной 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" в родительском окне

2 голосов
/ 02 сентября 2014

Мы можем вставить тег стиля в 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>
1 голос
/ 29 декабря 2016

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

  1. Раздел iFrame
  2. Страница загружена внутри рамки

Итак, вы хотите оформить эти два раздела следующим образом:

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") 
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" }
     ));
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...