Bir iframe'leri sözde elemandan önce/sonra şekillendirmek bir şekilde mümkün mü?

Question

Başlığın belirttiği gibi, bir iframe sözdizimi before/after? ? Başka başka div ile iframe sarılması veya olmadan `

Ben herhangi bir öğe gibi stilini çalıştı, ancak hiçbir başarı:

iframe::before { 
    content: 'foo'; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

iframe::after { 
    content: 'bar'; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

http://fiddle.jshell.net/ppRqm/

Güncelleme

A bilinen geçici çözüm, kaynak dosyasındaki bir öğeye önce/sonra eklemektir: http://fiddle.jshell.net/ppRqm/2/

Ancak bazen kaynak dosyaya erişemezsiniz.

Answer 1

Emin değilim ama bence mümkün değil. Ya da bir iframe arkasındaki mantık, bunu başarmak için elinden geleni yapar.

Bildiğiniz gibi, sözde elemanları Bir iframe ile sözde elemanları iframe içerisinde ilave edileceğini yaparsak , onun kap için eklendi vardır. Ancak, sorun, iframe içeriği, satır içi içerik, tarayıcı iframe'leri desteklemiyorsa yüklenecektir.

<iframe> 
    <div>Your browser doesn't support iframes</div> 
</iframe> 

Ve sözde elemanları ekleyerek, aynı şeyi yapacağız;:

Bu

bu demektir Modern tarayıcılarda satır içi içerik görüntülenemedi.

Answer 2

Doğrudan Çalışma-Around Hata Amaçlı

için geçersiz veya eskimiş koduyla elemanlarına bir outline veren bir ayıklama CSS katmanı var. Tam olarak bir cevap olmasa da, bir iframe ile gömülü olan herhangi bir içeriğin allowfullscreen="true" özniteliğine/değerine sahip olduğundan emin olmanın bir yolunu bulmaya çalışırken birisi bunu yararlı bulabilir. Bu çalışma, bir kardeş seçiciyi kullanır ve yeterince iyi çalışır.

Doğrudan Şekillendirme Üçüncü Eleman

iç çerçevenin göreli pozisyon arıyorsanız benim sonraki öneri position: relative; ve için iframe'in ana pozisyonunu ayarlamak olacaktır o zaman bir üzerinde position: absolute; set kullanarak

iframe:not([allowfullscreen]) + *::after 
{ 
background-color: #f00; 
border: #f00 solid 4px; 
color: #fff; 
content: 'Missing allowfullscreen attribute on iframe!' !important; 
font-size: 24px; 
padding: 4px; 
} 

Iframe'in oluşturulmasını eşleştirmek için üçüncü öğesi. Son olarak, o üçüncü öğeye ::after uygulayabilirsiniz.