के अंदर div शैली को प्रभावित करने के लिए सीएसएस का उपयोग करना क्या सीएसएस का उपयोग कर पृष्ठ पर किसी आईफ्रेम के अंदर मौजूद एक div की शैलियों को बदलना संभव है?iframe
iframe
उत्तर
संक्षिप्त संख्या में।
आप आईफ़्रेम पर लोड किए गए HTML पर सीएसएस लागू नहीं कर सकते हैं, जब तक कि आपके पास क्रॉस-डोमेन संसाधन प्रतिबंधों के कारण आईफ़्रेम में लोड किए गए पृष्ठ पर नियंत्रण न हो।
यह सच है लेकिन वास्तव में लोगों को उदाहरण देने में मदद नहीं करता कि –
शायद आप जिस तरह से सोच रहे हैं उतना नहीं। सीएसएस फ़ाइल में iframe को <link>
भी होगा। और यदि आप किसी भिन्न डोमेन पर हैं तो आप जावास्क्रिप्ट के साथ भी ऐसा नहीं कर सकते हैं।
कैसे आप संभवतया एक उदाहरण दे सकते हैं कि यह कैसे किया जा सकता है? क्या आपका मतलब है '
आपको जावास्क्रिप्ट की आवश्यकता है। यह मूल पृष्ठ में ऐसा करने जैसा ही है, सिवाय इसके कि आपको iframe के नाम से अपने जावास्क्रिप्ट कमांड को उपसर्ग करना होगा।
याद रखें, वही मूल नीति लागू होती है, इसलिए आप इसे केवल अपने आईफ़्रेम तत्व से ही कर सकते हैं जो आपके सर्वर से आ रहा है।
मैं Prototype ढांचे का उपयोग यह आसान बनाने के लिए:
frame1.$('mydiv').style.border = '1px solid #000000'
या
frame1.$('mydiv').addClassName('withborder')
मेरा यह प्रश्न देखें यह समान है http://stackoverflow.com/questions/1962707/how-to-give-style-to-iframed-page-content-using-parent-pages-css लेकिन क्या हम शैली बदल नहीं सकते हैं फ्रेम किसी अन्य सर्वर से है? –
यह सही है। Iframe सामग्री एक ही डोमेन नीति के अधीन है। यदि यह आपके डोमेन से है, तो आप इसे नियंत्रित कर सकते हैं, यदि नहीं, तो आप लॉक हो गए हैं। यह सभी प्रकार के इफ्रेम-आधारित पेज अपहरण को रोकता है। –
बिल्कुल "सीएसएस केवल" समाधान नहीं है, लेकिन मेरे लिए काफी अच्छा है। +1 –
त्वरित जवाब है: नहीं, क्षमा करें।
केवल सीएसएस का उपयोग करना संभव नहीं है। स्टाइल करने के लिए आपको मूल रूप से आईफ्रेम सामग्री पर नियंत्रण रखना होगा। कुछ आवश्यक शैलियों को गतिशील रूप से सम्मिलित करने के लिए जावास्क्रिप्ट या अपनी पसंद की अपनी वेब भाषा (जिसे मैंने थोड़ा पढ़ा है, लेकिन खुद से परिचित नहीं हूं) का उपयोग कर विधियां हैं, लेकिन आपको आईफ़्रेम सामग्री पर प्रत्यक्ष नियंत्रण की आवश्यकता होगी, जो इसे लगता है जैसे आपके पास नहीं है।
हां। जानकारी के लिए इस अन्य धागा पर एक नज़र डालें: How to apply CSS to iframe?
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);
फ्रेम 1 iframe की आईडी है ?? –
हां, फ्रेम 1 आईफ्रेम की आईडी है। –
हाँ, यह हालांकि बोझिल संभव है। आपको पेज के एचटीएमएल को अपने पेज के बॉडी में प्रिंट/इको करना होगा, फिर एक सीएसएस नियम परिवर्तन समारोह लागू करें। ऊपर दिए गए एक ही उदाहरण का उपयोग करके, आप अनिवार्य रूप से पृष्ठ में divs खोजने के लिए एक पार्सिंग विधि का उपयोग कर रहे हैं, और उसके बाद सीएसएस को लागू कर रहे हैं और उसके बाद अंतिम उपयोगकर्ता को इसे पुन: प्रिंट/प्रतिबिंबित कर सकते हैं। मुझे इसकी आवश्यकता नहीं है इसलिए मैं उस फ़ंक्शन को किसी अन्य वेबपृष्ठ के सीएसएस में बस प्रत्येक आइटम में कोड करना नहीं चाहता हूं।
संदर्भ:
सवाल विशेष रूप से "केवल सीएसएस का उपयोग" पूछता है। इसे ध्यान में रखते हुए, आपका जवाब गलत है। –
उपयोग jQuery और स्रोत का इंतजार भरी हुई है, यह मैं कैसे हासिल किया है (प्रयुक्त कोणीय अंतराल, आप कर सकते हैं se जावास्क्रिप्ट setInterval विधि):
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);
आप iframe लोड किए गए ईवेंट का उपयोग क्यों नहीं करते? – ProllyGeek
हाँ हम निश्चित रूप से उस –
आप एक iframe
पहले की सामग्री को प्राप्त कर सकते हैं और फिर हमेशा की तरह उनके खिलाफ jQuery
चयनकर्ताओं का उपयोग।
$("#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)); });
शुभकामनाएँ!
का उपयोग नहीं कर सकते हैं: अनचाहे DOMException: 'HTMLFrameElement' से 'contentDocument' प्रॉपर्टी को पढ़ने में विफल: मूल रूप से "http: // HOST" को क्रॉस-मूल फ्रेम तक पहुंचने से अवरुद्ध किया गया । – tubbo
क्लाइंट साइड से संभव नहीं है। एक जावास्क्रिप्ट त्रुटि उठाई जाएगी "त्रुटि: अनुमति का उपयोग करने के लिए अनुमति अस्वीकार" दस्तावेज़ "" अगर इफ्रेम आपके डोमेन का हिस्सा नहीं है। एकमात्र समाधान पृष्ठ को सर्वर साइड कोड से लाने और आवश्यक सीएसएस को बदलने का है।
यह उत्तर इसकी सामग्री में सही है लेकिन जावास्क्रिप्ट से संबंधित है जबकि प्रश्न सीएसएस से संबंधित है। जवाब यह हो सकता है कि आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है लेकिन आप यह नहीं कहें। जवाब यह भी मानता है कि आईफ्रेम में सामग्री एक अलग डोमेन से है, जो हमेशा मामला नहीं है। अंत में, सटीक संदेश ब्राउज़र से ब्राउज़र में भिन्न होगा। – pwdst
चीजों को करने का एक प्रकार का हैक-इश तरीका यूजीन ने कहा है। मैं अपने कोड का पालन कर रहा हूं और पेज के लिए अपने कस्टम सीएसएस से लिंक कर रहा हूं। मेरे लिए समस्या यह थी कि, एक ट्विटर टाइमलाइन के साथ आपको अपने कोड को एक स्मिडजेन ओवरराइड करने के लिए ट्विटर के कुछ सिडस्टेपिंग करना पड़ता है। अब हमारे पास हमारे सीएसएस के साथ एक रोलिंग टाइमलाइन है, आईई। बड़ा फ़ॉन्ट, उचित रेखा ऊंचाई और स्क्रॉलबार को उनकी सीमाओं से अधिक ऊंचाई के लिए छुपाया गया है।
var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
जाहिर है यह jQuery के माध्यम से किया जा सकता है:
$('iframe').load(function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
की
आप क्रोम ब्राउज़र में एक ही मूल नीति के कारण अब इसका उपयोग नहीं कर सकते हैं। त्रुटि संदेश: 'अनचाहे DOMException:' HTMLFrameElement 'से' contentDocument 'प्रॉपर्टी को पढ़ने में विफल: मूल क्रॉस-मूल फ्रेम तक पहुंचने से मूल **** के साथ फ्रेम को अवरोधित किया गया। – Mohammad
- 1. iframe
- 2. iframe
- 3. iframe
- 4. iframe
- 5. iframe
- 6. iframe
- 7. iframe
- 8. iFrame
- 9. iframe
- 10. iframe
- 11. iframe
- 12. iframe
- 13. iframe
- 14. iFrame
- 15. iframe
- 16. iframe
- 17. iframe
- 18. iframe
- 19. iframe
- 20. iframe
- 21. IFrame
- 22. iFrame
- 23. iFrame
- 24. iframe
- 25. iframe
- 26. iFrame
- 27. iframe
- 28. iframe क्लिक करें, यह iframe पेज
- 29. मैं IFrame
- 30. अभिभावक IFRAME
संभावित डुप्लिकेट [कैसे iframe पर सीएसएस लागू करने के लिए?] (Http://stackoverflow.com/questions/217776/कैसे-टू-लागू-सीएसएस-टू-इफ्रेम) –