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


858
2017-10-20 08:27


asal


Jawaban:


Edit: Ini tidak bekerja lintas domain kecuali yang sesuai Tajuk CORS diatur.

Ada dua hal berbeda di sini: gaya blok iframe dan gaya halaman yang disematkan dalam iframe. Anda dapat mengatur gaya iframe memblokir 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 dalam iframe harus ditetapkan dengan menyertakannya di halaman turunan:

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

378
2017-10-20 09:07



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

Untungnya, URL dari kode embed tidak memiliki batasan pada akses langsung, jadi dengan menggunakan fungsi PHP file_get_contents mungkin untuk mendapatkan seluruh konten dari halaman. Alih-alih memanggil URL Google, dimungkinkan untuk memanggil file php yang ada 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 jalur ke stylesheet Anda:

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

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

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

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

Akhir google.php file akan 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 iframe kode embed ke:

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

Semoga berhasil!


174
2017-09-20 22:21



Jika isi iframe tidak sepenuhnya di bawah kendali Anda atau Anda ingin mengakses konten dari halaman berbeda dengan gaya berbeda, Anda dapat mencoba memanipulasinya 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 disajikan dari domain yang sama.


69
2017-10-20 08:58



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

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

51
2017-11-21 16:17



Iframe secara universal ditangani seperti halaman HTML yang berbeda oleh sebagian besar browser. Jika Anda ingin menerapkan stylesheet yang sama ke konten iframe, cukup referensi dari halaman yang digunakan di sana.


35
2017-10-20 08:37



Jika Anda mengontrol halaman dalam iframe, seperti yang dikatakan hangy, pendekatan yang paling mudah adalah membuat file CSS bersama dengan gaya umum, kemudian hanya menautkannya dari halaman html Anda.

Jika tidak, Anda tidak akan dapat secara dinamis mengubah gaya halaman dari halaman eksternal di iframe Anda. Ini karena browser telah memperketat keamanan pada cross frame dom scripting karena kemungkinan penyalahgunaan untuk spoofing dan peretasan lainnya.

Tutorial ini dapat memberi Anda lebih banyak informasi tentang iframes scripting secara umum. Tentang skrip lintas bingkai menjelaskan pembatasan keamanan dari perspektif IE.


26
2017-10-20 08:52



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!


24
2017-10-15 22:47



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


20
2017-07-28 22:53



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 jQuery contoh itu termasuk halaman html lain ke dalam dokumen Anda. Ini jauh lebih SEO friendly daripada iframe. Untuk memastikan bahwa bot tidak mengindeks halaman yang disertakan, tambahkan saja untuk tidak mengizinkan masuk 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>

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


12
2018-03-02 07:16



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

11
2018-05-23 16:22