Menggunakan CSS untuk memengaruhi gaya div di dalam iframe

Apakah mungkin untuk mengubah gaya div yang berada di dalam iframe pada halaman menggunakan CSS saja?

Anda membutuhkan JavaScript. Ini sama dengan melakukannya di halaman induk, kecuali Anda harus mengawali perintah JavaScript Anda dengan nama iframe.

Ingat, kebijakan asal yang sama berlaku, jadi Anda hanya bisa melakukan ini ke elemen iframe yang berasal dari server Anda sendiri.

Saya menggunakan kerangka kerja Prototipe untuk membuatnya lebih mudah:

frame1.$('mydiv').style.border = '1px solid #000000'

atau

frame1.$('mydiv').addClassName('withborder')

Singkatnya tidak.

Anda tidak dapat menerapkan CSS ke HTML yang dimuat dalam iframe, kecuali Anda memiliki kontrol atas halaman yang dimuat di iframe karena pembatasan sumber daya lintas domain.

Iya. Lihatlah utas lainnya untuk detail: Bagaimana cara menerapkan CSS ke iframe?

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

Anda dapat mengambil konten yang iframepertama dan kemudian menggunakan jQuerypenyeleksi terhadap mereka seperti biasa.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Semoga berhasil!

Jawaban cepatnya adalah: Tidak, maaf.

Tidak mungkin hanya menggunakan CSS. Pada dasarnya Anda perlu memiliki kontrol atas konten iframe untuk menata gaya itu. Ada beberapa metode menggunakan javascript atau bahasa web pilihan Anda (yang telah saya baca sedikit tentangnya, tetapi saya tidak terlalu terbiasa dengan diri saya sendiri) untuk menyisipkan beberapa gaya yang diperlukan secara dinamis, tetapi Anda akan memerlukan kontrol langsung atas konten iframe, yang kedengarannya seperti itu. seperti kamu tidak punya.

Gunakan Jquery dan tunggu sampai sumbernya dimuat, Ini adalah bagaimana saya telah mencapai (Digunakan interval sudut, Anda dapat menggunakan metode setInterval javascript):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

mungkin bukan cara Anda berpikir. iframe juga harus ada <link>di file css. DAN Anda tidak dapat melakukannya bahkan dengan javascript jika berada di domain yang berbeda.

Ternyata itu bisa dilakukan melalui jQuery:

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

https://stackoverflow.com/a/13959836/1625795

Semacam cara hack-ish dalam melakukan sesuatu adalah seperti kata Eugene. Saya akhirnya mengikuti kode-nya dan menautkan ke CSS kustom saya untuk halaman tersebut. Masalahnya bagi saya adalah bahwa, Dengan timeline twitter Anda harus melakukan beberapa sidestepping dari twitter untuk mengganti kode mereka menjadi smidgen. Sekarang kami memiliki timeline bergulir dengan css kami untuk itu, font IE Larger, tinggi garis yang tepat dan membuat scrollbar tersembunyi untuk ketinggian lebih besar dari batas mereka.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Cukup tambahkan ini dan semua berfungsi dengan baik:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Ya, itu mungkin meskipun rumit. Anda perlu mencetak / menggema HTML halaman ke dalam tubuh halaman Anda kemudian menerapkan fungsi perubahan aturan CSS. Menggunakan contoh-contoh yang sama yang diberikan di atas, Anda pada dasarnya akan menggunakan metode parsing untuk menemukan div di halaman, dan kemudian menerapkan CSS untuk itu dan kemudian mencetak ulang / menggemakannya ke pengguna akhir. Saya tidak membutuhkan ini jadi saya tidak ingin kode fungsi itu ke setiap item di CSS dari halaman web lain hanya untuk aphtply.

Referensi:

• Mencetak konten IFRAME
• Mengakses dan mencetak kode sumber HTML menggunakan PHP atau JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Menggabungkan berbagai solusi, inilah yang berhasil bagi saya.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

Tidak mungkin dari sisi klien. Kesalahan javascript akan dimunculkan "Kesalahan: Izin ditolak untuk mengakses properti" dokumen "" karena Iframe bukan bagian dari domain Anda. Satu-satunya solusi adalah mengambil halaman dari kode sisi server dan mengubah CSS yang dibutuhkan.