Iframe के अंदर div शैली को प्रभावित करने के लिए CSS का उपयोग करना

Question

क्या यह एक div की शैलियों को बदलना संभव है जो केवल CSS का उपयोग करके पृष्ठ पर एक iframe के अंदर रहता है?

Comments

सीएसएस को आइफ्रेम

— अलेक्जेंडर ओ'मैरा

बारे में अधिक जानकारी CORS : wikipedia.org/wiki/Content_Security_Policy और developer.mozilla.org/docs/Web/HTTP/CORS

— ashleedawg

Answer 1

आपको जावास्क्रिप्ट की आवश्यकता है। यह मूल पृष्ठ में इसे करने के समान है, सिवाय इसके कि आप अपने जावास्क्रिप्ट कमांड को iframe के नाम से उपसर्ग करें।

याद रखें, एक ही मूल नीति लागू होती है, इसलिए आप इसे केवल एक iframe तत्व के लिए कर सकते हैं जो आपके स्वयं के सर्वर से आ रहा है।

मैं इसे आसान बनाने के लिए प्रोटोटाइप ढांचे का उपयोग करता हूं :

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

या

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

Comments

मेरा यह प्रश्न देखें यह समान stackoverflow.com/questions/1962707/… है, लेकिन अगर फ्रेम दूसरे सर्वर से है तो क्या हम स्टाइल नहीं बदल सकते?

— जितेन्द्र व्यास

वह सही है। Iframe सामग्री समान-डोमेन नीति के अधीन है। यदि यह आपके डोमेन से है, तो आप इसे नियंत्रित कर सकते हैं, यदि नहीं, तो आप लॉक हो गए हैं। यह सभी प्रकार के Iframe- आधारित पेज को हाइजैक करने से रोकता है।

— डायोडस - जेम्स मैकफर्लेन 16

बिल्कुल नहीं "सीएसएस केवल" समाधान, लेकिन मेरे लिए काफी अच्छा है। +1

— निकु सुरदु

यह सीएसएस नहीं है।

— stramin

Answer 2

संक्षेप में।

आप सीएसएस को HTML में लागू नहीं कर सकते हैं जो एक iframe में लोड किया गया है, जब तक कि आपके पास क्रॉस-डोमेन संसाधन प्रतिबंधों के कारण iframe में लोड किए गए पृष्ठ पर नियंत्रण नहीं है।

Comments

यह सच है, लेकिन वास्तव में लोगों को एक उदाहरण देने में मदद नहीं करता है कि कैसे

— साइमन ड्रग्सबेक

क्या यह सिर्फ 2018 में आएगा? मुझे याद है कि मैं iframe की शैली को बाहर से आता था। मुझे लगता है कि स्क्रिप्ट के द्वारा प्रदान की गई iframe पर सीएसएस लागू करने की कोशिश, लेकिन यह work.l नहीं stil

— Võ मिन्ह

Answer 3

हाँ। विवरण के लिए इस अन्य सूत्र पर एक नज़र डालें: CSS को iframe में कैसे लागू करें?

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

Comments

फ्रेम 1 आइफ्रेम की आईडी है ??

— टोनी मिशेल Caubet

हां, फ्रेम 1 आईफ्रेम की आईडी है।

— यूजीन रोसेनफेल्ड

यह कोई CSS है।

— stramin

अगर हम iframe में अलग डोमेन लोड कर रहे हैं तो हम ऐसा नहीं कर सकते।

— सुनीथ सागा

frame1आइफ्रेम नाम है, आईडी नहीं

— joseantgv

Answer 4

आप 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)); });

शुभ लाभ!

Comments

काम नहीं करता है: अनकैप्ड DOMException: 'HTMLDrameElement' से 'contentDocument' प्रॉपर्टी को पढ़ने में विफल: क्रॉस- ऑरिजनल फ्रेम तक पहुँचने से मूल " HOST " के साथ एक फ़्रेम को ब्लॉक किया गया ।

— ट्यूबबो

@tubbo, आपके मामले में, आप XSS से रोकी गई अनधिकृत साइटों को एम्बेड नहीं कर सकते। यह केवल अपनी समस्याओं की तलाश करने वालों के लिए है, न कि हैकर्स के लिए: p

— रियाज़ हमीद

Answer 5

त्वरित उत्तर है: नहीं, क्षमा करें।

यह सिर्फ CSS का उपयोग करना संभव नहीं है। मूल रूप से आपको इसे स्टाइल करने के लिए iframe कंटेंट पर नियंत्रण रखना होगा। जावास्क्रिप्ट या अपनी पसंद की वेब भाषा का उपयोग करने के तरीके हैं (जो मैंने थोड़ा पढ़ा है, लेकिन खुद से परिचित नहीं हूं) कुछ आवश्यक शैलियों को गतिशील रूप से सम्मिलित करने के लिए, लेकिन आपको iframe सामग्री पर सीधे नियंत्रण की आवश्यकता होगी, जो इसे लगता है जैसे आपके पास नहीं है।

Answer 6

Jquery का उपयोग करें और स्रोत के लोड होने तक प्रतीक्षा करें, यह है कि मैंने कैसे हासिल किया है (प्रयुक्त कोणीय अंतराल, आप जावास्क्रिप्ट सेटइंटरवल विधि का उपयोग कर सकते हैं):

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

Comments

क्यों आप iframe भरी हुई घटना का उपयोग न करें?

— प्रोलिगीक

Answer 7

शायद आप जैसा सोच रहे हैं वैसा नहीं है। iframe को <link>css फ़ाइल में भी होना चाहिए। और आप इसे जावास्क्रिप्ट के साथ भी नहीं कर सकते हैं अगर यह एक अलग डोमेन पर है।

Comments

क्या आप संभवतः इसका उदाहरण दे सकते हैं कि यह कैसे किया जा सकता है? क्या आपका मतलब कुछ ऐसा है <iframe src="/source" link=css-stylesheet:"/css.css">?

— एंट

Answer 8

जाहिरा तौर पर यह jQuery के माध्यम से किया जा सकता है:

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

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

Comments

क्रोम ब्राउज़र में समान मूल नीति के कारण आप इसका उपयोग नहीं कर सकते। त्रुटि संदेश:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.

— मोहम्मद अलबन्ना

@ अधम, क्या हम iframe तत्व की शैली पत्रक को अधिलेखित कर सकते हैं? यदि हाँ, कृपया स्क्रिप्ट जोड़ें।

— सुपर मॉडल

Answer 9

चीजों को करने का एक तरह का हैक-ईश तरीका यूजीन ने कहा है। मैंने उनके कोड का पालन किया और पेज के लिए अपने कस्टम सीएसएस से लिंक किया। मेरे लिए समस्या यह थी कि, एक ट्विटर टाइमलाइन के साथ, आपको अपने कोड को स्मिडेन को ओवरराइड करने के लिए ट्विटर के कुछ साइडस्टैपिंग करने होंगे। अब हमारे पास अपनी सीएसएस के साथ एक रोलिंग टाइमलाइन है, IE लार्जर फॉन्ट, उचित लाइन ऊंचाई और स्क्रॉलबार को अपनी सीमा से बड़ी ऊंचाई के लिए छिपाकर।

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

Answer 10

बस इसे जोड़ें और सभी अच्छे से काम करें:

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

Comments

यह सुनिश्चित नहीं है कि यह दिए गए प्रश्न का सही उत्तर है, लेकिन यह डिवाइस की चौड़ाई के लिए Google फॉर्म का आकार बदलने के लिए एक शानदार समाधान था, बहुत धन्यवाद!

— shiftyscales

Answer 11

हां, यह संभव है, हालांकि बोझिल है। आपको पृष्ठ के HTML को अपने पृष्ठ के शरीर में प्रिंट / इको करना होगा फिर CSS नियम परिवर्तन फ़ंक्शन लागू करना होगा। ऊपर दिए गए समान उदाहरणों का उपयोग करते हुए, आप अनिवार्य रूप से पृष्ठ में divs को खोजने की एक पार्सिंग विधि का उपयोग कर रहे होंगे, और फिर सीएसएस को उस पर लागू कर सकते हैं और फिर इसे अंतिम उपयोगकर्ता को रिप्रजेंट कर रहे हैं / गूंज रहे हैं। मुझे इसकी आवश्यकता नहीं है इसलिए मैं उस फ़ंक्शन को किसी अन्य वेबपेज के सीएसएस में हर आइटम में केवल एफटीपी के लिए कोड नहीं करना चाहता हूं।

संदर्भ:

• IFRAME की मुद्रण सामग्री
• PHP या जावास्क्रिप्ट का उपयोग करके HTML स्रोत कोड तक पहुंच और मुद्रण
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Comments

प्रश्न विशेष रूप से "केवल CSS का उपयोग करके" पूछता है। इसे ध्यान में रखते हुए, आपका उत्तर गलत है।

— सर्ज सगन

यह सीएसएस नहीं है।

— stramin

Answer 12

विभिन्न समाधानों को मिलाकर, यह मेरे लिए काम किया है।

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

Answer 13

क्लाइंट की तरफ से संभव नहीं। एक जावास्क्रिप्ट त्रुटि उठाई जाएगी "त्रुटि: संपत्ति" दस्तावेज़ "तक पहुंचने की अनुमति से इनकार कर दिया जाता है क्योंकि इफ्रेमी आपके प्रभुत्व का हिस्सा नहीं है। एकमात्र उपाय पृष्ठ को सर्वर साइड कोड से लाना और आवश्यक सीएसएस को बदलना है।

Comments

यह उत्तर इसकी सामग्री में सही है, लेकिन जावास्क्रिप्ट से संबंधित है, जबकि प्रश्न सीएसएस से संबंधित है। इसका उत्तर यह हो सकता है कि आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है लेकिन आप ऐसा नहीं कहते हैं। उत्तर यह भी मानता है कि iFrame में सामग्री एक अलग डोमेन से है, जो हमेशा ऐसा नहीं होता है। अंत में, सटीक संदेश ब्राउज़र से ब्राउज़र तक भिन्न होगा।

— pwdst 14