Bagaimana cara menerapkan CSS ke iframe?

Saya memiliki halaman sederhana yang memiliki beberapa bagian iframe (untuk menampilkan tautan RSS). Bagaimana saya bisa menerapkan format CSS yang sama dari halaman utama ke halaman yang ditampilkan di iframe?

Sunting: Ini tidak berfungsi lintas domain kecuali header CORS yang sesuai diatur.

Ada dua hal berbeda di sini: gaya blok iframe dan gaya halaman yang disematkan di iframe. Anda dapat mengatur gaya blok iframe dengan cara biasa:

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

Gaya halaman yang disematkan di iframe harus diatur dengan memasukkannya di halaman anak:

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

Atau dapat dimuat dari halaman induk dengan Javascript:

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

Saya bertemu masalah ini dengan Kalender Google . Saya ingin menatanya di latar belakang yang lebih gelap dan mengubah font.

Untungnya, URL dari kode sematan tidak memiliki batasan akses langsung, jadi dengan menggunakan fungsi PHP file_get_contentsdimungkinkan untuk mendapatkan seluruh konten dari halaman. Alih-alih memanggil URL Google, dimungkinkan untuk memanggil file php yang terletak di server Anda, mis. google.php, yang akan berisi konten asli dengan modifikasi:

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

Menambahkan path ke stylesheet Anda:

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

(Ini akan menempatkan stylesheet Anda terakhir sebelum head tag akhir.)

Tentukan url dasar dari url asli dalam kasus css dan js disebut relatif:

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

File terakhir google.phpakan terlihat seperti ini:

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

Kemudian Anda mengubah iframekode sematan ke:

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

Semoga berhasil!

Jika konten iframe tidak sepenuhnya di bawah kendali Anda atau Anda ingin mengakses konten dari halaman yang berbeda dengan gaya yang berbeda, Anda dapat mencoba memanipulasi menggunakan 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);

Perhatikan bahwa tergantung pada browser apa yang Anda gunakan ini mungkin hanya berfungsi pada halaman yang dilayani dari domain yang sama.

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

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

Iframe ditangani secara universal seperti laman HTML lain oleh sebagian besar peramban. Jika Anda ingin menerapkan stylesheet yang sama ke konten iframe, cukup rujuk dari halaman yang digunakan di sana.

Berikut adalah cara menerapkan kode CSS secara langsung tanpa menggunakan <link>untuk memuat stylesheet tambahan.

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

Ini menyembunyikan spanduk di halaman iframe. Terima kasih atas saran Anda!

Jika Anda mengontrol halaman di iframe, seperti kata hangy, pendekatan termudah adalah membuat file CSS bersama dengan gaya umum, kemudian tautkan ke sana dari halaman html Anda.

Kalau tidak, Anda tidak mungkin dapat secara dinamis mengubah gaya halaman dari halaman eksternal di iframe Anda. Ini karena browser telah memperketat keamanan pada skrip dom lintas bingkai karena kemungkinan penyalahgunaan untuk spoofing dan peretasan lainnya.

Tutorial ini dapat memberi Anda lebih banyak informasi tentang skrip iframe secara umum. Tentang cross frame scripting menjelaskan batasan keamanan dari perspektif IE.

Di atas dengan sedikit perubahan berfungsi:

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

Bekerja dengan baik dengan ff3 dan ie8 setidaknya

Jika Anda ingin menggunakan kembali CSS dan JavaScript dari halaman utama, mungkin Anda harus mempertimbangkan untuk mengganti <IFRAME>dengan konten yang dimuat Ajax. Ini lebih SEO friendly sekarang ketika bot pencarian dapat mengeksekusi JavaScript.

Ini adalah contoh jQuery yang menyertakan halaman html lain ke dalam dokumen Anda. Ini jauh lebih ramah SEO daripada iframe. Untuk memastikan bahwa bot tidak mengindeks halaman yang disertakan, tambahkan saja untuk melarang masukrobots.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>

Anda juga dapat memasukkan jQuery langsung dari Google: http://code.google.com/apis/ajaxlibs/documentation/ - ini berarti penyertaan otomatis opsional untuk versi yang lebih baru dan beberapa peningkatan kecepatan yang signifikan. Juga, berarti Anda harus memercayai mereka karena hanya memberikan Anda jQuery;)

Berikut ini bekerja untuk saya.

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

Memperluas solusi jQuery di atas untuk mengatasi penundaan dalam memuat konten bingkai.

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

Versi ringkas saya :

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

Namun, kadang-kadang iframetidak siap di jendela dimuat, jadi ada kebutuhan menggunakan penghitung waktu .

Kode siap pakai (dengan timer):

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

... dan tautan jQuery:

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

Jawaban lain di sini tampaknya menggunakan tautan jQuery dan CSS.

Kode ini menggunakan JavaScript vanilla. Itu menciptakan <style>elemen baru . Ini menetapkan konten teks elemen itu menjadi string yang berisi CSS baru. Dan itu menambahkan elemen itu langsung ke kepala dokumen 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);

Ketika Anda mengatakan "doc.open ()" itu berarti Anda dapat menulis tag HTML apa pun di dalam iframe, jadi Anda harus menulis semua tag dasar untuk halaman HTML dan jika Anda ingin memiliki tautan CSS di kepala iframe Anda, tulis saja iframe dengan tautan CSS di dalamnya. Saya memberi Anda sebuah contoh:

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

gunakan bisa coba ini:

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

Anda tidak akan bisa menata konten iframe dengan cara ini. Saran saya adalah menggunakan skrip sisi server (PHP, ASP, atau skrip Perl) atau menemukan layanan online yang akan mengonversi umpan ke kode JavaScript. Satu-satunya cara lain untuk melakukannya adalah jika Anda bisa memasukkan serveride.

Memetikan jika Anda memiliki akses ke halaman iframe dan ingin CSS berbeda untuk diterapkan hanya ketika Anda memuatnya melalui iframe di halaman Anda, di sini saya menemukan solusi untuk hal-hal semacam ini

ini berfungsi bahkan jika iframe memuat domain yang berbeda

periksa tentang postMessage()

rencananya adalah, kirim css ke iframe sebagai pesan seperti

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

* adalah untuk mengirim pesan ini terlepas dari domain apa itu di iframe

dan menerima pesan dalam iframe dan menambahkan pesan yang diterima (CSS) ke kepala dokumen itu.

kode untuk menambahkan halaman iframe

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

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

});

Karena banyak jawaban ditulis untuk domain yang sama, saya akan menulis bagaimana melakukannya di domain silang.

Pertama, Anda perlu mengetahui API Pesan Pos . Kami membutuhkan messenger untuk berkomunikasi antara dua jendela.

Inilah messenger yang saya buat.

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

}

Menggunakan ini dalam dua jendela untuk berkomunikasi dapat menyelesaikan masalah Anda.

Di jendela utama,

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

Kemudian, terima acara dari Iframe.

Di Iframe:

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

Lihat tutorial Lengkap Javascript dan Iframes untuk lebih jelasnya.

Saya menemukan solusi lain untuk meletakkan gaya di html utama seperti ini

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

dan kemudian di iframe lakukan ini (lihat js onload)

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

dan di js

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

Ini mungkin bukan solusi terbaik, dan tentu saja dapat ditingkatkan, tetapi ini merupakan pilihan lain jika Anda ingin menyimpan tag "style" di jendela induk

Di sini, ada dua hal di dalam domain

1. Bagian iFrame
2. Halaman dimuat di dalam iFrame

Jadi, Anda ingin menata kedua bagian tersebut sebagai berikut,

1. Gaya untuk Bagian iFrame

Itu bisa gaya menggunakan CSS dengan yang dihormati idatau classnama. Anda bisa men-style-nya di lembar Style induk Anda juga.

<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. Gaya Halaman yang Dimuat di dalam iFrame

Gaya ini dapat dimuat dari halaman induk dengan bantuan Javascript

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

kemudian atur file CSS itu ke bagian iFrame yang disegani

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

Di sini, Anda dapat mengedit Bagian Kepala Halaman di dalam iFrame menggunakan cara ini juga

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

Kita bisa menyisipkan tag gaya ke iframe. Diposting juga di sini ...

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

Saya pikir cara termudah adalah menambahkan div lain, di tempat yang sama dengan iframe, lalu

membuatnya z-indexlebih besar dari wadah iframe, sehingga Anda dapat dengan mudah hanya gaya div Anda sendiri. Jika Anda perlu mengkliknya, gunakan sajapointer-events:none div Anda sendiri, sehingga iframe akan berfungsi jika Anda perlu mengkliknya;)

Saya harap ini akan membantu seseorang;)

Ada skrip luar biasa yang menggantikan sebuah simpul dengan versi iframe itu sendiri. Demo CodePen

Contoh Penggunaan:

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

Sebagai alternatif, Anda dapat menggunakan teknologi CSS-in-JS, seperti lib di bawah ini:

https://github.com/cssobj/cssobj

Itu bisa menyuntikkan objek JS sebagai CSS ke iframe, secara dinamis

Ini hanya konsep, tetapi jangan menerapkan ini tanpa pemeriksaan keamanan dan penyaringan! Kalau tidak, skrip dapat meretas situs Anda!

Jawab: jika Anda mengontrol situs target, Anda dapat mengatur skrip penerima seperti:

1) atur tautan iframe dengan styleparameter, seperti:

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

(frasa terakhir a{color:red} dikodekan oleh urlencodefungsi.

2) atur halaman penerima target.phpseperti ini:

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

Baiklah, saya telah mengikuti langkah-langkah ini:

1. Div dengan kelas untuk mengadakan iframe
2. Tambahkan iframeke div.
3. Dalam file CSS,

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

Ini bekerja di IE 6. Jika bekerja di browser lain, lakukan pemeriksaan!