İframe içindeki div stilini etkilemek için CSS kullanma

Sayfadaki iframe içinde bulunan bir div'ın stillerini yalnızca CSS kullanarak değiştirmek mümkün müdür?

JavaScript'e ihtiyacınız var. Üst komut sayfasında yapmakla aynıdır, ancak JavaScript komutunuza iframe adının önüne ön ek eklemeniz gerekir.

Unutmayın, aynı başlangıç ​​politikası geçerlidir, böylece bunu yalnızca kendi sunucunuzdan gelen bir iframe öğesine yapabilirsiniz.

Bunu kolaylaştırmak için Prototip çerçevesini kullanıyorum :

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

veya

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

Kısacası hayır.

Etki alanları arası kaynak kısıtlamaları nedeniyle iframe'e yüklenen sayfa üzerinde denetiminiz yoksa, iframe'de yüklenen HTML'ye CSS uygulayamazsınız.

Evet. Ayrıntılar için bu diğer konuya bir göz atın: iframe'e CSS nasıl uygulanır?

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

Birincinin içeriğini alabilir iframeve daha sonra jQueryher zamanki gibi seçicileri kullanabilirsiniz .

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

İyi şanslar!

Hızlı cevap: Hayır, üzgünüm.

Sadece CSS kullanmak mümkün değil. Stil oluşturmak için temel olarak iframe içeriği üzerinde kontrol sahibi olmanız gerekir. Bazı gerekli stilleri dinamik olarak eklemek için javascript veya seçtiğiniz web dilini (biraz hakkında okudum, ancak kendime aşina değilim) kullanan yöntemler var, ancak iframe içeriği üzerinde doğrudan kontrole ihtiyacınız var. senin gibi yok.

Jquery kullanın ve kaynak yüklenene kadar bekleyin, Ben bu şekilde başardım (Kullanılan açısal aralık, javascript setInterval yöntemini kullanabilirsiniz):

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

muhtemelen düşündüğün gibi değil. iframe'in <link>de css dosyasında olması gerekir . VE farklı bir alandaysa javascript ile bile yapamazsınız.

Görünüşe göre jQuery ile yapılabilir:

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

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

Eugene'in dediği gibi, bir tür şeyleri yapmanın yolu. Kodunu takip ettim ve sayfa için özel Css'ime bağladım. Benim için sorun şuydu, bir twitter zaman çizelgesi ile bir smidgen kodlarını geçersiz kılmak için twitter biraz yan yapmak zorunda. Şimdi css, IE Büyük yazı tipi, uygun satır yüksekliği ve kaydırma çubuğunu sınırlarından daha büyük yüksekliklere gizleme ile yuvarlanan bir zaman çizelgesi var.

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

Sadece bunu ekleyin ve hepsi iyi çalışıyor:

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

Evet, hantal olsa da mümkündür. Sayfanın HTML kodunu sayfanızın gövdesine yazdırmanız / echo yapmanız ve ardından bir CSS kuralı değiştirme işlevi uygulamanız gerekir. Yukarıda verilen aynı örnekleri kullanarak, esas olarak sayfadaki div'leri bulmak için bir ayrıştırma yöntemi kullanır ve daha sonra CSS'yi ona uygular ve ardından son kullanıcıya yeniden yazdırır / tekrarlarsınız. Ben sadece aphtply için başka bir web sayfasının CSS her öğeye bu işlevi kodlamak istemiyorum bu gerek yok.

Referanslar:

• IFRAME içeriğini yazdırma
• PHP veya JavaScript kullanarak HTML kaynak koduna erişme ve yazdırma
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Farklı çözümleri birleştirdiğimde, bu benim için işe yaradı.

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

İstemci tarafından mümkün değil. Bir javascript hatası oluşacak "Hata: Iframe, doranızın bir parçası olmadığından" belge "özelliğine erişim izni reddedildi. Tek çözüm, sayfayı sunucu tarafı kodundan almak ve gerekli CSS'yi değiştirmek.