İframe'e CSS nasıl uygulanır?

Bazı iframe bölümleri (RSS bağlantıları görüntülemek için) olan basit bir sayfa var. Aynı CSS biçimini ana sayfadan iframe'de görüntülenen sayfaya nasıl uygulayabilirim?

Düzenleme: Bu, uygun CORS üstbilgisi ayarlanmadığı sürece etki alanları arası çalışmaz .

Burada iki farklı şey vardır: iframe bloğunun stili ve iframe'e katıştırılmış sayfanın stili. İframe bloğunun stilini her zamanki gibi ayarlayabilirsiniz:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

İç çerçeveye katıştırılmış sayfanın stili, alt sayfaya eklenerek ayarlanmalıdır:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Veya Javascript ile üst sayfadan yüklenebilir:

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

Bu sorunu Google Takvim ile tanıştım . Daha koyu bir arka plan üzerinde şekillendirmek ve yazı tipini değiştirmek istedim.

Neyse ki, gömme kodundaki URL'nin doğrudan erişim üzerinde herhangi bir kısıtlaması yoktu, bu nedenle PHP işlevini kullanarak file_get_contentstüm içeriği sayfadan almak mümkündür. Google URL'sini aramak yerine, sunucunuzda bulunan bir php dosyasını aramak mümkündür, ör. google.php, orijinal içeriği değişikliklerle içerecektir:

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

Stil sayfanıza yol ekleme:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(Bu, stil sayfanızı headbitiş etiketinin hemen öncesine yerleştirir .)

Css ve js'nin nispeten çağrılması durumunda orijinal url'den temel url'yi belirtin:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

Son google.phpdosya şöyle görünmelidir:

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

Ardından, iframeyerleştirme kodunu şu şekilde değiştirirsiniz :

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

İyi şanslar!

İframe içeriği tamamen sizin kontrolünüzde değilse veya farklı stillere sahip farklı sayfalardaki içeriğe erişmek istiyorsanız, JavaScript kullanarak değiştirmeyi deneyebilirsiniz.

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

Hangi tarayıcıyı kullandığınıza bağlı olarak, bunun yalnızca aynı alan adından sunulan sayfalarda çalışabileceğini unutmayın.

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

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

Bir iframe, çoğu tarayıcı tarafından evrensel olarak farklı bir HTML sayfası gibi ele alınır. Aynı stil sayfasını iframe'in içeriğine uygulamak istiyorsanız, sadece orada kullanılan sayfalardan referans alın.

<link>Ek bir stil sayfası yüklemek için kullanmadan doğrudan CSS kodunu nasıl uygulayacağınız aşağıda açıklanmıştır .

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

Bu, iframe sayfasındaki banner'ı gizler. Önerileriniz için teşekkür ederiz!

Sayfayı iframe'de kontrol ederseniz, hangy dediği gibi, en kolay yaklaşım, ortak stillerle paylaşılan bir CSS dosyası oluşturmaktır, sonra sadece html sayfalarınızdan bağlantı verin.

Aksi takdirde, iframe'inizdeki harici bir sayfadan bir sayfanın stilini dinamik olarak değiştirmeniz olası değildir. Bunun nedeni, tarayıcıların kimlik sahtekarlığı ve diğer hack'lerin olası yanlış kullanımı nedeniyle kareler arası dom komut dosyası oluşturma güvenliğini artırmasıdır.

Bu eğitici yazı genel olarak komut dosyaları iframe'leri hakkında daha fazla bilgi sağlayabilir. Çerçeveler arası komut dosyası oluşturma hakkında güvenlik kısıtlamalarını IE perspektifinden açıklar.

Küçük bir değişiklikle yukarıdakiler çalışır:

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

En azından ff3 ve ie8 ile iyi çalışır

Ana sayfadan CSS ve JavaScript'i yeniden kullanmak istiyorsanız, <IFRAME>Ajax yüklü bir içerikle değiştirmeyi düşünmelisiniz . Arama botları JavaScript çalıştırabildiğinde bu artık SEO dostu.

Bu, belgenize başka bir html sayfası içeren jQuery örneğidir. Bu çok daha SEO dostu iframe. Botların dahil edilen sayfayı dizine almadığından emin olmak için yalnızca izin vermemek için ekleyinrobots.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'yi doğrudan Google'dan da ekleyebilirsiniz: http://code.google.com/apis/ajaxlibs/documentation/ - bu, yeni sürümlerin isteğe bağlı otomatik eklenmesi ve bazı önemli hız artışı anlamına gelir. Ayrıca, size sadece jQuery sunmak için onlara güvenmeniz gerektiği anlamına gelir;)

Aşağıdakiler benim için çalıştı.

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

Çerçeve içeriğinin yüklenmesindeki gecikmelerle başa çıkmak için yukarıdaki jQuery çözümünü genişletme.

$('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();
});

Benim kompakt versiyonu :

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

Ancak, bazen iframepencere yüklendiğinde hazır değildir, bu nedenle bir zamanlayıcı kullanmaya ihtiyaç vardır .

Kullanıma hazır kod (zamanlayıcılı):

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

... ve jQuery bağlantısı:

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

Buradaki diğer yanıtlar jQuery ve CSS bağlantılarını kullanıyor gibi görünüyor.

Bu kod vanilya JavaScript kullanıyor. Yeni bir <style>eleman oluşturur . Bu öğenin metin içeriğini yeni CSS'yi içeren bir dize olarak ayarlar. Ve bu öğeyi doğrudan iframe belgesinin başına ekler.

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

"Doc.open ()" dediğinizde, iframe içine hangi HTML etiketini yazabileceğiniz anlamına gelir, bu nedenle HTML sayfası için tüm temel etiketleri yazmalısınız ve iframe başlığınızda bir CSS bağlantısı olmasını istiyorsanız, İçinde CSS bağlantısı olan iframe. Size bir örnek vereyim:

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="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

kullanımı bunu deneyebilir:

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

İframe'in içeriğini bu şekilde biçimlendiremezsiniz. Benim önerim sunucu tarafı komut dosyası (PHP, ASP veya Perl komut dosyası) kullanmak veya bir özet akışını JavaScript koduna dönüştürecek bir çevrimiçi hizmet bulmak olacaktır. Bunu yapmanın tek yolu, bir serveride dahil etmek olabilir.

Eğer iframe sayfasına erişiminiz varsa ve farklı bir CSS'nin sadece sayfanıza iframe aracılığıyla yüklediğinizde uygulanmasını istiyorsanız, burada bu tür şeyler için bir çözüm buldum

iframe farklı bir alan yüklüyor olsa bile bu işe yarar

kontrol etmek postMessage()

plan, css'yi iframe'e aşağıdaki gibi bir mesaj olarak gönderin

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

* iframe'de hangi alan adında olduğuna bakılmaksızın bu mesajı göndermektir

mesajı iframe içine alın ve alınan mesajı (CSS) bu belge başlığına ekleyin.

iframe sayfasına eklenecek kod

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

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

Aynı etki alanları için birçok yanıt yazıldığı için, bunun çapraz etki alanlarında nasıl yapılacağını yazacağım.

İlk olarak, Mesaj Gönderme API'sını bilmeniz gerekir . İki pencere arasında iletişim kurmak için bir elçiye ihtiyacımız var.

İşte yarattığım bir elçi.

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

Bunu iletişim kurmak için iki pencerede kullanmak sorununuzu çözebilir.

Ana pencerelerde,

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

Ardından, olayı Iframe'den alın.

Iframe'de:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

Daha fazla ayrıntı için Javascript ve Iframe'leri Tamamlama eğitimine bakın.

Stili ana html'ye böyle koymak için başka bir çözüm buldum

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

ve iframe'de bunu yapın (bkz. js onload)

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

ve js olarak

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

En iyi çözüm olmayabilir ve kesinlikle geliştirilebilir, ancak üst pencerede bir "stil" etiketi tutmak istiyorsanız başka bir seçenektir

Burada, alan adında iki şey var

1. iFrame Bölümü
2. İFrame'in İçine Yüklenen Sayfa

Bu iki bölümü şu şekilde şekillendirmek istiyorsunuz,

1. iFrame Bölümü için Stil

Bu saygın idveya classadla CSS kullanarak stil verebilir . Sadece üst Stil sayfalarınızda da stil uygulayabilirsiniz.

<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'in İçine Yüklenen Sayfayı Biçimlendirin

Bu Stiller, Javascript yardımıyla üst sayfadan yüklenebilir

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

ardından bu CSS dosyasını saygın iFrame bölümüne ayarlayın

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

Burada, iFrame içindeki Sayfanın Baş Kısmını bu yolu kullanarak da düzenleyebilirsiniz

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

İframe içine stil etiketi ekleyebiliriz. Burada da gönderildi ...

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

Bence en kolay yol iframe ile aynı yere başka bir div eklemektir.

onun yapmak z-indexKendi div tefriş sadece tarzı böyle en iframe konteyner daha büyük. Tıklamanız gerekiyorsa, sadece pointer-events:nonekendi div'inizde kullanın , bu nedenle iframe tıklamanız gerektiğinde çalışır;)

Umarım birine yardım eder;)

Bir yoktur harika senaryo kendisinin bir iframe sürümüyle bir düğümü değiştirir. CodePen Demosu

Kullanım örnekleri:

// 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">'
});

Alternatif olarak, aşağıdaki lib gibi CSS-in-JS teknolojisini kullanabilirsiniz:

https://github.com/cssobj/cssobj

JS nesnesini dinamik olarak iframe'e CSS olarak enjekte edebilir

Bu sadece bir kavram, ancak güvenlik kontrolleri ve filtreleme olmadan bunu uygulamayın! Aksi takdirde komut dosyası sitenizi hackleyebilir!

Yanıt: Hedef siteyi kontrol ederseniz, alıcı komut dosyasını aşağıdaki gibi ayarlayabilirsiniz:

1) iframe bağlantısını aşağıdaki stylegibi parametre ile ayarlayın :

http://your_site.com/target.php?color=red

(son ifade işlevle a{color:red} kodlanır urlencode.

2) alıcı sayfasını target.phpşu şekilde ayarlayın:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

Şu adımları izledim:

1. Tutulacak bir sınıfla div iframe
2. Ekle iframeiçin div.
3. CSS dosyasında,

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Bu IE 6'da çalışır. Diğer tarayıcılarda çalışmalı, kontrol et!