Bagaimana cara menerapkan CSS ke iframe?

1017

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?

Akshay Mulgavkar
sumber
66
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:

<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);
Tamas Czinege
sumber
30
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:

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

SequenceDigitale.com
sumber
71
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.

Horst Gutmann
sumber
82
Mungkin perlu dicatat bahwa kebijakan asal yang sama akan menghentikan ini berfungsi jika halaman tersebut pada domain yang berbeda.
ConroyP
2
Sejalan dengan pemikiran tetapi lebih ringkas: <iframe onload="this.contentDocument.body.style.overflow='hidden';" />
Pelindung satu
Bahkan Firefox telah menjadi CORS
59
var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
Rami Sarieddine
sumber
@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.

lengket
sumber
22
@ cepat tapi ... bagaimana?
A Child of God
29

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!

domih
sumber
1
Apakah ini membutuhkan iframe dengan id iframe?
Jeremy
1
@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.

Abu
sumber
19

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

Eric
sumber
7
Apa myData dan dari mana asalnya
Tigran
1
@ Tigran itu untukdynamic data
Akash
13

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

Sorin
sumber
1
Orang harus mencatat bahwa solusi ini tidak berfungsi jika konten halaman dinamis dengan cara apa pun.
nickdnk
12

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();
Peter
sumber
1
Kesalahan:Uncaught TypeError: Cannot read property 'open' of undefined
KingRider
10

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();
});
David Bradshaw
sumber
1
'$ This' harus berupa '$ (ini)' agar dapat berfungsi. Baik ketika itu :)
h.coates
9

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>
Zbigniew Wiadro
sumber
8

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

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();
Parham Fazel
sumber
7

gunakan bisa coba ini:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
Ajay Malhotra
sumber
3
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.

Peter Mortensen
sumber
29
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.

kode untuk menambahkan halaman iframe

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

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

});
CodeRows
sumber
4

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.

Supun Kavinda
sumber
3

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

Jperelli
sumber
3

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" }
     ));
K. Suthagar
sumber
2

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>
Palanikumar
sumber
1
Ini tidak berhasil. Tampaknya untuk menyisipkan tag gaya dengan benar tetapi tidak ada konten di dalamnya dan tidak ada ID.
darylknight
2

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

Astaga
sumber
1
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;)

Saya harap ini akan membantu seseorang;)

Mateusz Winnicki
sumber
1

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

masukkan deskripsi gambar di sini

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">'
});
karlisup
sumber
1
Kenapa kamu mau melakukan itu ?!
Dylan Watson
1

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

James Yang
sumber
0

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>
..........
T.Todua
sumber
3
Peringatan: ini injeksi yang terbaik.
kano
1
ya, jangan lakukan ini, kecuali jika Anda ingin memuat bot tes-pen dan kiddies skrip pada server Anda =) ...
exside
1
Saya telah memperbarui jawaban sekarang, dengan menambahkan peringatan keamanan
T.Todua
-18

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!

JannuD
sumber
9
perlu mengontrol div di dalam iframe, ini tidak
MSD