2013-06-05 9 views
14

जैसा कि शीर्षक कहता है, क्या iframes छद्म before/after शैली बनाने का कोई तरीका है? ? बिना किसी और एक और div साथ आइफ्रेम लपेटकर, या `क्या यह किसी भी तरह से छद्म-तत्व के पहले/बाद में iframes शैली बनाना संभव है?

मैं किसी अन्य तत्व जैसे कि यह शैली की कोशिश की, लेकिन कोई सफलता:

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/

अद्यतन

एक ज्ञात वर्कअराउंड स्रोत फ़ाइल में किसी तत्व के पहले/बाद में जोड़ना है: http://fiddle.jshell.net/ppRqm/2/

लेकिन कभी-कभी आपके पास स्रोत-फ़ाइल तक कोई पहुंच नहीं है।

उत्तर

20

मुझे यकीन नहीं है लेकिन मुझे लगता है कि यह संभव नहीं है। या एक आईफ्रेम के पीछे तर्क इसे हासिल करने के लिए असंभव बनाता है।

आप जानते हैं, छद्म तत्वों अपने कंटेनर करने के लिए कहा, यदि आप ऐसा है कि एक iframe के साथ, छद्म तत्वों iframe के भीतर जोड़ा जाएगा रहे हैं। लेकिन, और यहां समस्या है, iframe सामग्री, इनलाइन सामग्री, यदि ब्राउज़र आईफ्रेम का समर्थन नहीं करता है तो बस लोड होगा।

इसका मतलब है कि यह:

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

और छद्म तत्वों को जोड़ने, एक ही बात करना होगा; आधुनिक ब्राउज़रों पर इनलाइन सामग्रीप्रदर्शित नहीं किया जाएगा

1

प्रत्यक्ष काम के आसपास डीबगिंग उद्देश्यों

के लिए मैं एक डिबगिंग सीएसएस स्तरीय कि अवैध या अप्रचलित कोड के साथ तत्वों के लिए एक outline देता है। वास्तव में कोई जवाब नहीं होने पर किसी को यह उपयोगी लगता है क्योंकि मैं दृष्टि से यह सुनिश्चित करने का तरीका ढूंढ रहा था कि किसी आईफ्रेम के साथ एम्बेडेड किसी भी सामग्री में allowfullscreen="true" विशेषता/मान था। यह कार्य-आसपास एक भाई चयनकर्ता का उपयोग करता है और यह अच्छी तरह से काम करता है।

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 के सापेक्ष स्थिति मेरी अगली सिफारिश position: relative; और करने के लिए iframe की मूल स्थिति निर्धारित करने के होगा देख रहे हैं तोposition: absolute; एक पर सेट Iframe के प्रतिपादन से मेल खाने के लिए तीसरा तत्व। आखिरकार आप उस तीसरे तत्व पर ::after लागू कर सकते हैं।

संबंधित मुद्दे