Cum de a aplica CSS pentru iframe?

Edit: Acest lucru nu funcționează cross domeniu, cu excepția cazului corespunzătoare CORS antet este setat.

Acolo sunt două lucruri diferite aici: stil de iframe bloc și stilul de pagină încorporate în iframe. Puteți seta stilul de iframe bloca în mod obișnuit:

Stilul de pagină încorporat în iframe-ul trebuie să fie stabilit de către aceasta, inclusiv în pagina copil:

Sau poate fi încărcat de la pagina părinte cu Javascript:

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

Am întâlnit această problemă cu Google Calendar. Am vrut să-l stil pe un fundal întunecat și de a schimba fontul.

Din fericire, URL-ul de la codul de embed avut nici o restricție cu privire la acces direct, astfel încât, prin utilizarea PHP function file_get_contents este posibil pentru a obține întregul conținut de pe pagină. În loc de asteptare Google URL-ul, este posibil pentru a apela un fișier php, situat pe server, ex. google.php, care va conține conținut original cu modificări:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

Adăugarea calea ta de stil:

$content = str_replace('','', $content);

(Acest lucru va plasa stylesheet trecută, chiar înainte de " șef " end tag-ul.)

Specifica url-ul de bază forma url-ul original în cazul în css și js sunt numite relativ:

$content = str_replace('','', $content);

La final `google.php dosarul ar trebui să arate astfel:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('','', $content);
$content = str_replace('','', $content);
echo $content;

Atunci schimbi iframe cod de embed pentru:

Mult noroc!

În cazul în care conținutul de iframe-ul nu este complet sub controlul dumneavoastră sau doriți să accesați conținutul de pe pagini diferite, cu stiluri diferite, ai putea încerca manipularea folosind 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);

Rețineți că în funcție de ce browser folosesti acest lucru ar putea funcționa doar pe paginile servit din același domeniu.

Un iframe este universal manipulate ca o altă pagină HTML de cele mai multe browsere. Dacă doriți să se aplice același stil de conținutul de iframe, doar trimitere la paginile utilizate într-acolo.

Aici este cum să se aplice codul CSS direct, fără a utiliza <link> pentru a încărca un plus de stil.

var head = jQuery("#iframe").contents().find("head");
var css = '' +
          '#banner{display:none}; ' +
          '';
jQuery(head).append(css);

Aceasta ascunde banner-ul din iframe-ul paginii. Vă mulțumim pentru sugestiile dumneavoastră!

Dacă ai control pagina din iframe, ca hangy spus, cea mai simplă abordare este de a crea o comună CSS fișiere cu stiluri comune, atunci doar link-ul de la de pagini html.

În caz contrar, este puțin probabil va fi capabil de a schimba dinamic stil de o pagină de la o pagină externă în iframe. Acest lucru este pentru că browsere au înăsprit securitatea pe cruce cadru dom scripting din cauza posibilul abuz de spoofing și alte hacks.

Acest tutorial vă poate oferi mai multe informații despre scripting iframe, în general. Despre cruce cadru de scripting explică restricțiile de securitate din IE perspectivă.

Cele de mai sus cu o mica schimbare de lucrări:

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

Funcționează bine cu ff3 și ie8 cel puțin

Dacă doriți să reutilizați CSS și JavaScript din pagina principală poate că ar trebui să ia în considerare înlocuirea `<iframe> cu un Ajax încărcat conținut. Acest lucru este mai mult SEO prietenos acum, când roboții de căutare sunt în măsură să execute JavaScript.

Acest lucru este jQuery, de exemplu, care include o altă pagină html în document. Acest lucru este mult mai SEO friendly decât iframe. În scopul de a fi sigur că roboții nu sunt indexarea incluse pagină trebuie doar să adăugați-l pentru a interzice în robots.txt`

  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>

    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 

Ai putea, de asemenea, includ jQuery direct de la Google: http://code.google.com/apis/ajaxlibs/documentation/ - acest lucru înseamnă opțional auto-includerea unor versiuni mai noi și semnificative de viteză crește. De asemenea, înseamnă că trebuie să ai încredere în ei pentru livrarea doar jQuery ;)

Următoarele lucrat pentru mine.

var iframe = top.frames[name].document;
var css = '' +
          '' +
          'body{margin:0;padding:0;background:transparent}' +
          '';
iframe.open();
iframe.write(css);
iframe.close();

Extinderea pe deasupra jQuery soluție pentru a face față cu orice întârzieri la încărcare conținutul cadrului.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

Mea versiune compactă:

<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($("", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

Cu toate acestea, uneori, iframe nu este gata pe fereastră încărcate, astfel încât există o nevoie de a utiliza o timer.

Gata de utilizare cod (cu temporizator):

<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($("", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

...și jQuery link-ul:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

utilizare poate încercați acest lucru:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("  .my-class{display:none;}  "));
  });

Alte raspunsuri aici par să utilizați jQuery și CSS link-uri.

Acest cod foloseste vanilie JavaScript. Se creează un nou ` element. Aceasta stabilește textul conținut de acel element să fie un șir de caractere care conține noul CSS. Și adaugă ca element direct la iframe document's cap.

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

Cand spui "doc.open()" înseamnă că poți scrie orice tag HTML în interiorul iframe, deci ar trebui să scrie pe toate etichetele de bază pentru pagina HTML și dacă doriți să aveți un CSS link-ul din iframe capul scrie doar un iframe cu CSS link-ul în ea. Am să vă dau un exemplu:

doc.open();

doc.write('<meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/>Print Frame<table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table>');

doc.close();

Tu nu va fi capabil să stil conținutul iframe acest fel. Sugestia mea ar fi să folosiți serverside de scripting (PHP, ASP, sau un script Perl) sau a găsi un serviciu online care va converti un flux de cod JavaScript. Singurul mod de a o face ar fi daca poti sa faci un serverside includ.

Incase dacă aveți acces la iframe pagina si vreau un CSS diferite să se aplice pe ea doar atunci când încărcați-l prin iframe pe pagina ta, aici am găsit o soluție pentru aceste fel de lucruri

aceasta funcționează chiar dacă se incarca iframe-un domeniu diferit

verifica despre postMessage()`

planul este, trimite css pentru iframe ca un mesaj de genul

iframenode.postMessage('h2{color:red;}','*');

* este de a trimite acest mesaj, indiferent de ce domeniu este în iframe

și de a primi mesajul în iframe și adăugați mesajul primit(CSS) pentru care documentul de cap.

codul pentru a adăuga în iframe pagina

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild(''+e.data+'');

});

Am găsit o altă soluție pentru a pune stilul în principal html astfel de prognoze

    html {
        color: white;
        background: black;
    }


    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }

și apoi, în iframe face acest lucru (a se vedea js onload)

și în js

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

Aceasta nu poate fi cea mai bună soluție, și cu siguranță poate fi îmbunătățit, dar este o altă opțiune dacă doriți să păstrați un "style" tag-ul în fereastra parinte

Aici, Există două lucruri în domeniu

1. iFrame Secțiune
2. Pagina Încărcate în interiorul iFrame

Deci, doriți să stil cele două secțiuni, după cum urmează,

1. Stil pentru Secțiunea iFrame

Se poate stil folosind CSS cu care a respectat " id " sau "clasa" numele. Puteți pur și simplu stilul în părinte foi de Stil, de asemenea.

#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}

2. Stilul Paginii Încărcate în interiorul iFrame

Aceste Stiluri pot fi încărcate de la pagina părinte cu ajutorul Javascript

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

apoi configurați-o ca fișier CSS respectat iFrame secțiune

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

Aici, puteți edita o Parte Capul de Pagină în interiorul iFrame folosind acest mod, de asemenea,

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

Putem introduce etichetă de stil în iframe. Postat, de asemenea, aici...

.className
{
    background-color: red;
}




<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>