Ganti gaya tubuh untuk konten dalam iframe

Bagaimana saya bisa mengontrol gambar latar belakang dan warna elemen tubuh dalam suatu iframe? Catatan, elemen tubuh tertanam memiliki kelas, dan iframemerupakan halaman yang merupakan bagian dari situs saya.

Alasan saya membutuhkan ini adalah bahwa situs saya memiliki latar belakang hitam yang ditetapkan untuk tubuh, dan kemudian latar belakang putih yang ditugaskan untuk div yang berisi teks. Editor WYSIWYG menggunakan iframeuntuk menanamkan konten saat mengedit, tetapi itu tidak termasuk div, sehingga teks sangat sulit dibaca.

Tubuh iframesaat di editor memiliki kelas yang tidak digunakan di tempat lain, jadi saya berasumsi ini diletakkan di sana sehingga masalah seperti ini dapat diselesaikan. Namun, ketika saya menerapkan gaya ke class.bodymereka tidak menimpa gaya yang diterapkan ke tubuh. Yang aneh adalah bahwa gaya muncul di Firebug, jadi saya tidak tahu apa yang terjadi!

Terima kasih

PEMBARUAN - Saya sudah mencoba solusi @ mikeq untuk menambahkan gaya ke kelas yang merupakan kelas tubuh. Ini tidak berfungsi ketika ditambahkan ke stylesheet halaman utama, tetapi tidak berfungsi ketika ditambahkan dengan Firebug. Saya berasumsi ini karena Firebug diterapkan ke semua elemen pada halaman sedangkan CSS tidak diterapkan dalam iframe. Apakah ini berarti menambahkan css setelah memuat jendela dengan JavaScript akan berhasil?

Iframe adalah 'lubang' di halaman Anda yang menampilkan halaman web lain di dalamnya. Isi iframe tidak dalam bentuk apa pun atau bagian dari halaman induk Anda.

Seperti yang telah dinyatakan orang lain, opsi Anda adalah:

• berikan file yang sedang dimuat di iframe CSS yang diperlukan
• Jika file di iframe berasal dari domain yang sama dengan orang tua Anda, maka Anda dapat mengakses DOM dokumen di iframe dari orang tua.

Di bawah ini hanya berfungsi jika konten iframe berasal dari domain induk yang sama.

Skrip jquery berikut berfungsi untuk saya. Diuji pada Chrome dan IE8. Iframe bagian dalam mereferensikan halaman yang berada di domain yang sama dengan halaman induk.

Dalam kasus khusus ini, saya menyembunyikan elemen dengan kelas tertentu di iframe batin.

Pada dasarnya, Anda hanya menambahkan elemen 'style' ke 'head' iframe bagian dalam.

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

Anda tidak dapat mengubah gaya halaman yang ditampilkan dalam iframe kecuali Anda memiliki akses langsung dan dengan demikian kepemilikan html sumber dan / atau file css.

Ini untuk menghentikan XSS (Cross Site Scripting)

An iframememiliki ruang lingkup lain, jadi Anda tidak dapat mengaksesnya ke gaya atau mengubah kontennya dengan javascript.

Ini pada dasarnya "halaman lain".

Satu-satunya hal yang dapat Anda lakukan adalah mengedit CSS-nya sendiri, karena dengan CSS global Anda, Anda tidak dapat melakukan apa-apa.

Timpa CSS domain lain iframe

Dengan menggunakan bagian dari jawaban SimpleSam5 , saya mencapai ini dengan beberapa iframe obrolan Tawk ( antarmuka penyesuaian mereka baik-baik saja tetapi saya perlu penyesuaian lebih lanjut).

Dalam iframe khusus ini yang muncul di perangkat seluler, saya harus menyembunyikan ikon default dan menempatkan salah satu gambar latar belakang saya. Saya melakukan yang berikut:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

Saya tidak memiliki domain Tawk apa pun dan ini berfungsi untuk saya, jadi Anda dapat melakukan ini bahkan jika itu bukan dari domain induk yang sama (terlepas dari komentar Jeremy Becker tentang jawaban Sam).

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 =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Jika Anda memiliki kendali atas halaman yang meng-host iframe dan halaman iframe, Anda dapat meneruskan parameter kueri ke iframe ...

Berikut adalah contoh untuk menambahkan kelas ke iframe berdasarkan apakah situs hosting itu mobile atau tidak ...

Menambahkan iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

Di dalam iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

Saya memiliki blog dan saya memiliki banyak kesulitan mencari tahu cara mengubah ukuran inti tertanam saya. Manajer pos hanya memungkinkan Anda menulis teks, menempatkan gambar, dan menyematkan kode HTML. Tata letak blog itu sendiri responsif. Itu dibangun dengan Wix. Namun, HTML yang disematkan tidak. Saya membaca banyak tentang bagaimana tidak mungkin untuk mengubah ukuran komponen di dalam tubuh iFrames yang dihasilkan. Jadi, inilah saran saya:

Jika Anda hanya memiliki satu komponen di dalam iFrame Anda, yaitu inti Anda, Anda hanya dapat mengubah ukuran inti. Lupakan iFrame.

Saya punya masalah dengan viewport, tata letak khusus untuk agen pengguna yang berbeda dan inilah yang memecahkan masalah saya:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

Logikanya adalah untuk mengatur inti (atau komponen Anda) css berdasarkan agen pengguna. Pastikan untuk mengidentifikasi komponen Anda terlebih dahulu, sebelum mendaftar ke pemilih kueri. Silakan melihat bagaimana responsif bekerja .

Mungkin sudah berubah sekarang, tapi saya telah menggunakan stylesheet terpisah dengan elemen ini:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

untuk berhasil memasang youtube iframe dengan gaya ... lihat posting blog di halaman ini .

berikan tubuh halaman iframe Anda ID (atau kelas jika Anda mau)

<html>
<head></head>
<body id="myId">
</body>
</html>

kemudian, juga di dalam halaman iframe, tetapkan latar belakang untuk itu dalam CSS

#myId {
    background-color: white;
}