Bir iframe'deki içerik için gövde stilini geçersiz kılma

İçindeki bir gövde öğesinin arka plan resmini ve rengini nasıl kontrol edebilirim iframe? Gömülü gövde öğesinin bir sınıfı vardır ve iframesitemin bir parçası olan bir sayfadır.

Buna ihtiyacımın nedeni, sitemin gövdeye atanmış siyah bir arka plana ve ardından metin içeren div'lara atanmış beyaz bir arka plana sahip olmasıdır. Bir WYSIWYG düzenleyicisi, iframeiçeriği düzenlerken gömmek için a kullanır , ancak div içermez, bu nedenle metni okumak çok zordur.

Vücut iframezaman editörü böyle problemleri çözülebilir yüzden bu orada konulmuştur tahmin ediyorum bu yüzden, başka bir yerde kullanılmayan bir sınıfı vardır. Ancak, class.bodystilleri uyguladığımda, gövdeye uygulanan stilleri geçersiz kılmazlar. Tuhaf olan şey, stillerin Firebug'da görünmesi, bu yüzden neler olduğu hakkında hiçbir fikrim yok!

Teşekkürler

GÜNCELLEME - @ mikeq'ın vücuda sınıf olan bir stile ekleme çözümünü denedim. Bu, ana sayfanın stil sayfasına eklendiğinde çalışmaz, ancak Firebug ile eklendiğinde çalışır. Bunun, Firebug'ın sayfadaki tüm öğelere uygulanmış olduğunu, ancak CSS'nin iframe'ler içinde uygulanmadığını varsayıyorum. Bu, JavaScript ile pencere yüklendikten sonra css eklemenin işe yarayacağı anlamına mı geliyor?

Bir iframe, sayfanızın içinde başka bir web sayfası görüntüleyen bir 'delik'tir. İframe içeriği üst sayfanızın herhangi bir şekilde veya formunda değildir.

Diğerlerinin de belirttiği gibi, seçenekleriniz:

• iframe'e yüklenen dosyaya gerekli CSS'yi verin
• iframe'deki dosya üst öğenizle aynı alandaysa, iframe'deki belgenin DOM'sine üst öğeden erişebilirsiniz.

Aşağıdakiler yalnızca iframe içeriği aynı üst alan adından geliyorsa çalışır.

Aşağıdaki jquery betiği benim için çalışıyor. Chrome ve IE8'de test edildi. İç iframe, üst sayfayla aynı alanda bulunan bir sayfaya referans verir.

Bu özel durumda, iç iframe'de belirli bir sınıfa sahip bir elemanı saklıyorum.

Temel olarak, iç iframe'in 'başlığına' bir 'stil' öğesi eklersiniz.

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

Doğrudan erişiminiz olmadığı ve bu nedenle kaynak html ve / veya css dosyalarına sahip olmadığınız sürece iframe'de görüntülenen sayfanın stilini değiştiremezsiniz .

Bu, XSS'yi (Siteler Arası Komut Dosyası) durdurmak içindir

A'nın iframebaşka bir kapsamı vardır, bu nedenle stile erişmek veya içeriğini javascript ile değiştirmek için erişemezsiniz.

Temelde "başka bir sayfa".

Yapabileceğiniz tek şey kendi CSS'sini düzenlemektir, çünkü global CSS'nizle hiçbir şey yapamazsınız.

Başka bir alan adı iframe CSS'sini geçersiz kıl

SimpleSam5'in cevabının bir kısmını kullanarak , bunu Tawk'ın sohbet iframe'lerinden birkaçı ile başardım ( özelleştirme arayüzü iyi, ancak daha fazla özelleştirmeye ihtiyacım vardı).

Mobil cihazlarda gösterilen bu özel iframe'de, varsayılan simgeyi gizlemem ve arka plan resimlerimden birini yerleştirmem gerekiyordu. Aşağıdakileri yaptım:

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

Herhangi bir Tawk alanım yok ve bu benim için çalıştı, bu yüzden aynı ana alandan olmasa bile ( Jeremy Becker'in Sam'in cevabına ilişkin yorumuna rağmen ) bunu yapabilirsiniz.

Bu kod vanilya JavaScript kullanıyor. Yeni bir <style>eleman oluşturur . Bu öğenin metin içeriğini yeni CSS'yi içeren bir dize olarak ayarlar. Ve bu öğeyi doğrudan iframe belgesinin başına ekler.

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

İframe'i barındıran sayfanın ve iframe'in sayfasını kontrol ediyorsanız, iframe'e bir sorgu parametresi iletebilirsiniz ...

Barındırma sitesinin mobil olup olmadığına bağlı olarak iframe'e bir sınıf eklemek için bir örnek ...

İFrame ekleniyor:

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

İç 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");
}

Bir blogum var ve gömülü gistimi nasıl yeniden boyutlandıracağımı bulmakta çok fazla sorun yaşadım. Yayın yöneticisi yalnızca metin yazmanıza, resimler yerleştirmenize ve HTML kodunu gömmenize izin verir. Blog düzeni kendiliğinden yanıt verir. Wix ile inşa edilmiştir. Ancak, gömülü HTML değildir. Oluşturulan iFrames gövdesi içindeki bileşenleri yeniden boyutlandırmanın imkansız olduğu hakkında çok şey okudum. İşte benim önerim:

İFrame'inizde yalnızca bir bileşen, yani özünüz varsa, yalnızca özü yeniden boyutlandırabilirsiniz. İFrame'i unutun.

Viewport, farklı kullanıcı aracıları için özel düzenleri ile sorunları vardı ve bu benim sorunum çözüldü:

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

Mantık, kullanıcı aracısına dayalı olarak gist (veya bileşeniniz) css'yi ayarlamaktır. Sorgu seçiciye başvurmadan önce bileşeninizi tanımladığınızdan emin olun. Duyarlılığın nasıl çalıştığına bir göz atmaktan çekinmeyin .

Belki şimdi değişti, ancak bu öğeyle ayrı bir stil sayfası kullandım:

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

gömülü youtube iframe'lerini başarıyla biçimlendirmek için ... bu sayfadaki blog yayınlarına bakın .

iframe sayfanızın gövdesine bir kimlik (veya isterseniz bir sınıf) verin

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

daha sonra iframe'in sayfasında da CSS'de buna bir arka plan atayın

#myId {
    background-color: white;
}