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?
Itu mungkin tetapi hanya jika domain iframe sama dengan induknya
gawpertron
13
gawpertron, hanya untuk memperjelas, apakah Anda mengatakan jika saya menggunakan konten iFrame dari beberapa domain lain yang tidak saya kontrol, tidak ada cara bagi saya untuk mengontrol CSS untuk konten itu?
Ville M
Bisakah Anda mendaftar tautan ke halaman sehingga kami mungkin bisa melihat perubahan kami.
5
Domain, port, dan protokolnya harus sama, tidak berfungsi dengan subdomain.
lee penkman
Jawaban:
434
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:
Harap perhatikan, bagi saya sepertinya beberapa contoh yang diposting sebelumnya sekarang tidak valid untuk html5. Anda dapat mengakses isi frame sebagai berikut: document.getElementById("myframe").contentDocument. Menanamkan css sepertinya masih tidak bekerja untuk saya.
Rehno Lindeque
35
tautan hanya dapat muncul di HEAD
Knu
18
Hanya bekerja untuk saya ketika saya melakukannya ...document.head.appendChild(cssLink)- Firefox dan Safari.
mojuba
24
Apakah ini benar-benar bekerja lintas domain? Saya pikir itu tidak akan terjadi.
Simon East
89
Jadi tidak ada lagi yang harus mengujinya untuk mencari tahu: benar, tidak bekerja lintas domain. Segera setelah melakukan bingkai ['nama'] Anda mendapatkan "Upaya JavaScript yang Tidak Aman untuk mengakses bingkai dengan URL bla dari bingkai dengan URL bla. Domain, protokol, dan porta harus cocok."
Kevin
205
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:
Anda dapat menyebut peretasan itu dengan definisi jika Anda mau. Tapi Anda tidak menawarkan solusi yang lebih baik ... Solusi ini bukan cara untuk merusak layanan Google atau menipu orang dengan cara mengeksploitasi kelemahan mereka.
SequenceDigitale.com
5
Saya akan membunuh untuk cara membuat solusi ini berfungsi dengan google docs. Ini membuang semua jenis kesalahan javascript. "UnEught TypeError: Tidak dapat membaca properti 'a' yang tidak terdefinisi"
deweydb
1
Nevermind, saya menemukan
jawabannya
9
@ ChrisHoughton FYI, pada dasarnya tidak. Namun, ini dapat membuat seluruh iframe menjadi tidak berguna (salah satu alasan untuk menggunakan iframe, misalnya, adalah untuk tujuan keamanan, misalnya dengan pembayaran kartu, dan jika Anda melakukan apa yang disarankan di sini, Anda mungkin akan menyebabkan masalah pada diri Anda sendiri).
alastair
10
Dengan melakukan ini, Anda selalu mendapatkan kalender sebagai pengguna yang tidak masuk. Dengan iframe html normal, pengguna akan melihat kalender pribadi mereka sendiri jika mereka masuk ke google, tetapi karena kode PHP Anda tidak dapat mengetahui ID sesi Google pengguna, ia tidak dapat mengambil kalender pribadi mereka.
bdsl
72
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.
@deweydb saya menggunakannya dengan iframe lintas domain secara khusus. tapi aku hanya bisa memohon maafmu!
Rami Sarieddine
@ramie dan Anda mengujinya di beberapa browser? sebagian besar browser melakukan kesalahan keamanan.
deweydb
Saya melihat ide ini sebelumnya tetapi menambahkan tautan ke file yang benar-benar hebat dan profesional ... + up
J.Tural
29
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!
@jmalais Cukup ganti #iframedengan #<id>atau bahkan iframeuntuk memilih semua iframes
Zeb McCorkle
3
Ini sepertinya tidak bekerja untuk saya. Iframe yang saya coba edit juga tidak memiliki kepala langsung di bawahnya di dom. Jadi apakah itu berarti bahwa saya perlu mengakses kepala di dalam dokumen html atau apakah sesuatu yang dapat ditemukan oleh fungsi jquery dengan sendirinya?
David A. French
1
Memeriksa konsol dan sepertinya telah diblokir untuk mengakses konten iframe karena ketidakcocokan domain. Saya menggunakan chrome dan hosting lingkungan dev saya secara lokal saat ini.
David A. French
DOMException tidak tertangkap: Memblokir bingkai dengan asal memberi saya kesalahan ini
priyanka patel
26
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.
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 thisvar 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);
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
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;)
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.
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:
Jika iframe Anda berasal dari sumber yang berbeda, mekanisme CORS tidak akan mengizinkan penyelesaian ini.
Tn. Anderson
Bagaimana jika urr iframe diaktifkan CORS untuk semua lokasi?
adrhc
6
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.
Berhati-hatilah ketika Anda mengatakan bahwa sesuatu tidak dapat dilakukan, padahal kenyataannya itu sulit
Lathan
4
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.
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
*/classCrossMessenger{/**
*
* @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 namevar 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(typeofthis.eventHandlers[eventName]==="function")this.eventHandlers[eventName](data);}}
Menggunakan ini dalam dua jendela untuk berkomunikasi dapat menyelesaikan masalah Anda.
Di jendela utama,
var msger =newCrossMessenger(iframe.contentWindow,"https://iframe.s.domain");var cssContent =Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent",{
css: cssContent
})
Ini mungkin bukan solusi terbaik, dan tentu saja dapat ditingkatkan, tetapi ini merupakan pilihan lain jika Anda ingin menyimpan tag "style" di jendela induk
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><iframename='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"}));
Saya telah memeriksa jawaban ini berkali-kali. Apa yang ada di richTextFieldsini?
Kirankumar Dafda
1
itu nama iframe
Jeeva
Saya tidak mencoba, tapi saya kira itu tidak akan terjadi karena itu melawan kotak pasir
Jeeva
1
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;)
Jawaban:
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:
Gaya halaman yang disematkan di iframe harus diatur dengan memasukkannya di halaman anak:
Atau dapat dimuat dari halaman induk dengan Javascript:
sumber
document.getElementById("myframe").contentDocument
. Menanamkan css sepertinya masih tidak bekerja untuk saya....document.head.appendChild(cssLink)
- Firefox dan Safari.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_contents
dimungkinkan 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:Menambahkan path ke stylesheet Anda:
(Ini akan menempatkan stylesheet Anda terakhir sebelum
head
tag akhir.)Tentukan url dasar dari url asli dalam kasus css dan js disebut relatif:
File terakhir
google.php
akan terlihat seperti ini:Kemudian Anda mengubah
iframe
kode sematan ke:Semoga berhasil!
sumber
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.
Perhatikan bahwa tergantung pada browser apa yang Anda gunakan ini mungkin hanya berfungsi pada halaman yang dilayani dari domain yang sama.
sumber
<iframe onload="this.contentDocument.body.style.overflow='hidden';" />
sumber
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.
sumber
Berikut adalah cara menerapkan kode CSS secara langsung tanpa menggunakan
<link>
untuk memuat stylesheet tambahan.Ini menyembunyikan spanduk di halaman iframe. Terima kasih atas saran Anda!
sumber
iframe
?#iframe
dengan#<id>
atau bahkaniframe
untuk memilih semuaiframe
sJika 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.
sumber
Di atas dengan sedikit perubahan berfungsi:
Bekerja dengan baik dengan ff3 dan ie8 setidaknya
sumber
dynamic data
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
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;)
sumber
Berikut ini bekerja untuk saya.
sumber
Uncaught TypeError: Cannot read property 'open' of undefined
Memperluas solusi jQuery di atas untuk mengatasi penundaan dalam memuat konten bingkai.
sumber
Versi ringkas saya :
Namun, kadang-kadang
iframe
tidak siap di jendela dimuat, jadi ada kebutuhan menggunakan penghitung waktu .Kode siap pakai (dengan timer):
... dan tautan jQuery:
sumber
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.sumber
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:
sumber
gunakan bisa coba ini:
sumber
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.
sumber
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
*
adalah untuk mengirim pesan ini terlepas dari domain apa itu di iframedan menerima pesan dalam iframe dan menambahkan pesan yang diterima (CSS) ke kepala dokumen itu.
kode untuk menambahkan halaman iframe
sumber
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.
Menggunakan ini dalam dua jendela untuk berkomunikasi dapat menyelesaikan masalah Anda.
Di jendela utama,
Kemudian, terima acara dari Iframe.
Di Iframe:
Lihat tutorial Lengkap Javascript dan Iframes untuk lebih jelasnya.
sumber
Saya menemukan solusi lain untuk meletakkan gaya di html utama seperti ini
dan kemudian di iframe lakukan ini (lihat js onload)
dan di js
Ini mungkin bukan solusi terbaik, dan tentu saja dapat ditingkatkan, tetapi ini merupakan pilihan lain jika Anda ingin menyimpan tag "style" di jendela induk
sumber
Di sini, ada dua hal di dalam domain
Jadi, Anda ingin menata kedua bagian tersebut sebagai berikut,
1. Gaya untuk Bagian iFrame
Itu bisa gaya menggunakan CSS dengan yang dihormati
id
atauclass
nama. Anda bisa men-style-nya di lembar Style induk Anda juga.2. Gaya Halaman yang Dimuat di dalam iFrame
Gaya ini dapat dimuat dari halaman induk dengan bantuan Javascript
kemudian atur file CSS itu ke bagian iFrame yang disegani
Di sini, Anda dapat mengedit Bagian Kepala Halaman di dalam iFrame menggunakan cara ini juga
sumber
Kita bisa menyisipkan tag gaya ke iframe. Diposting juga di sini ...
sumber
sumber
richTextField
sini?Saya pikir cara termudah adalah menambahkan div lain, di tempat yang sama dengan iframe, lalu
membuatnya
z-index
lebih 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;)
sumber
Ada skrip luar biasa yang menggantikan sebuah simpul dengan versi iframe itu sendiri. Demo CodePen
Contoh Penggunaan:
sumber
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
sumber
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
style
parameter, seperti:(frasa terakhir
a{color:red}
dikodekan olehurlencode
fungsi.2) atur halaman penerima
target.php
seperti ini:sumber
Baiklah, saya telah mengikuti langkah-langkah ini:
iframe
iframe
kediv
.Ini bekerja di IE 6. Jika bekerja di browser lain, lakukan pemeriksaan!
sumber