दिलचस्प पोस्ट
XML पर JSON को पसंद करते समय? Proguard का उपयोग करके लॉग कॉल निकाल रहा है जावा: ArrayList में डुप्लिकेट का पता लगाएं? 'मिनऑकर्स' विशेषता मौजूद नहीं हो सकती jQuery के jqGrid एक संपादन पंक्ति पूर्ण होने पर संदेश दिखाएं फिर भी किसी विधि को ट्रिगर करने के लिए जब एनोमोर को डोम में स्कोप अपडेट जोड़ना होता है? Chart.js पर डेटा वैल्यू कैसे प्रदर्शित करें एक निर्दिष्ट वर्ण jQuery या जावास्क्रिप्ट के पहले सफ़ेदिंग को कैसे प्राप्त करें जावा वेब स्टार्ट (जेएनएलपी) के अंतर्गत मैं कैसे डिबग कर सकता हूं? ग्रन्ट घड़ी त्रुटि – प्रतीक्षारत … घातक त्रुटि: देखें ENOSPC एचटीएमएल। डॉपडाउनलिस्ट में <option> एचटीएमएल वर्ग टैग जोड़ना चार परिवर्तित करना से बाइट स्प्रिंग / जावा त्रुटि: नामस्थान तत्व 'एनोटेशन-कॉन्फ़िग' … जेडीके 1.5 और अधिक पर डीजेंगो rest_framework में अनुपलब्ध प्राधिकरण हैडर, क्या अपाचे का दोष है? जब संग्रह का आदेश दिया जाता है तो क्या LINQ द्विआधारी खोज का उपयोग कर सकता है?

Iframe में सामग्री के लिए CSS ओवरराइड बॉडी स्टाइल?

मैं iframe के भीतर एक पृष्ठभूमि तत्व और शरीर के तत्व का रंग कैसे नियंत्रित कर सकता हूँ? ध्यान दें, एम्बेडेड बॉडी एलिमेंट में एक क्लास है, और iframe पृष्ठ का है जो मेरी साइट का हिस्सा है

इसकी आवश्यकता मुझे इसकी वजह से है कि मेरी साइट का एक काला पृष्ठभूमि शरीर को सौंपा गया है, और उसके बाद एक सफेद पृष्ठभूमि जो div को सौंपे गए हैं, जिसमें पाठ शामिल है। एक WYSIWYG संपादक संपादन करते समय सामग्री एम्बेड करने के लिए एक iframe का उपयोग करता है, लेकिन इसमें div शामिल नहीं है, इसलिए पाठ को पढ़ने में बहुत मुश्किल है

आइफ्रेम का शरीर, जब संपादक में एक ऐसा वर्ग होता है जिसे कहीं और नहीं उपयोग किया जाता है, तो मुझे यह मानते हुए कि वहां इस तरह की समस्याओं को हल किया जा सकता है। हालांकि, जब मैं कक्षा में शैलियों को लागू करता हूं। वे शरीर पर लागू शैलियों को ओवरराइड न करते हैं। अजीब बात यह है कि शैलियों फेरबग में दिखती हैं, इसलिए कोई भी पता नहीं चल रहा है!

धन्यवाद

अद्यतन – Ive ने माइकक के समाधान को कक्षा में एक शैली जोड़ने का प्रयास किया, जो शरीर की कक्षा है। यह काम नहीं करता है जब मुख्य पेज स्टाइलशीट में जोड़ा जाता है, लेकिन फ़ायरबग के साथ जोड़ा जाने पर यह काम करता है। मैं यह मान रहा हूं क्योंकि फ़ायरबग को पृष्ठ पर सभी सभी एमेंट्स पर लागू किया जाता है, जहां सीआरएस iframes में लागू नहीं होता है। क्या इसका मतलब यह है कि जावास्क्रिप्ट के साथ विंडो भार के बाद सीएसएस को जोड़ना होगा?

Solutions Collecting From Web of "Iframe में सामग्री के लिए CSS ओवरराइड बॉडी स्टाइल?"

एक iframe आपके पृष्ठ में एक 'छेद' है जो इसके अंदर एक और वेब पेज दिखाता है Iframe की सामग्री आपके माता-पिता के किसी भी आकार या प्रपत्र हिस्से में नहीं है।

जैसा कि अन्य लोगों ने बताया है, आपके विकल्प हैं:

  • फ़ाइल को आइफ्रेम में आवश्यक सीएसएस लोड किया जा रहा है
  • अगर iframe में फ़ाइल आपके माता-पिता के समान डोमेन से है, तो आप माता-पिता से iframe में दस्तावेज़ का DOM एक्सेस कर सकते हैं।
  • एक iframe का उपयोग न करें (क्या आपको यकीन है कि आपको एक चाहिए?)

निम्नलिखित jquery स्क्रिप्ट मेरे लिए काम करता है Chrome और IE8 पर परीक्षण किया गया आंतरिक आइफ्रेम एक पृष्ठ का संदर्भ देता है जो माता-पिता के पृष्ठ के समान डोमेन पर होता है।

इस विशेष मामले में, मैं आंतरिक आइफ्रेम में एक विशिष्ट वर्ग के साथ एक तत्व छुपा रहा हूं।

असल में, आप सिर्फ एक 'शैली' तत्व को आंतरिक आइफ्रेम के 'सिर' में जोड़ते हैं।

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

आप एक आइफ्रेम में प्रदर्शित पृष्ठ की शैली को तब तक नहीं बदल सकते हैं जब तक कि आपको सीधे पहुंच न हो और इसलिए स्रोत HTML और / या सीएसएस फ़ाइलों का स्वामित्व।

यह XSS को रोकने के लिए है (क्रॉस साइट स्क्रिप्टिंग)

एक iframe का एक अन्य दायरा है, इसलिए आप इसे शैली तक नहीं पहुंच सकते या इसकी सामग्री को जावास्क्रिप्ट के साथ बदल सकते हैं।

यह मूल रूप से "एक और पृष्ठ" है

केवल एक चीज जो आप कर सकते हैं वह अपनी सीएसएस को संपादित करना है, क्योंकि आपके वैश्विक सीएसएस के कारण आप कुछ भी नहीं कर सकते।

अन्य डोमेन iframe CSS को ओवरराइड करें

SimpleSam5 के उत्तर का उपयोग करके, मैंने इसे ताक के कुछ चैट आइफ्रेम के साथ हासिल किया है (उनका अनुकूलन इंटरफ़ेस ठीक है, लेकिन मुझे और अनुकूलन की आवश्यकता है)।

इस विशेष आइफ्रेम में जो मोबाइल उपकरणों पर दिखता है, मुझे डिफ़ॉल्ट आइकन को छिपाने और एक मेरी पृष्ठभूमि छवियों को जगह देने की आवश्यकता है I मैंने निम्नलिखित किया:

 Tawk_API.onLoad = function() { // without a specific API, you may try a similar load function // perhaps with a setTimeout to ensure the iframe's content is fully loaded $('#mtawkchat-minified-iframe-element'). contents().find("head").append( $("<style type='text/css'>"+ "#tawkchat-status-text-container {"+ "background: url(http://img.hiwab.com/css/my_mobile_bg.png) no-repeat center center blue;"+ "background-size: 100%;"+ "} "+ "#tawkchat-status-icon {display:none} </style>") ); }; 

मेरे पास किसी टैक के डोमेन का मालिक नहीं है और यह मेरे लिए काम करता है, इस प्रकार आप ऐसा कर सकते हैं भले ही यह एक ही मूल डोमेन से नहीं है (सैम के उत्तर पर जेरेमी बेकर की टिप्पणी के बावजूद)।

यह कोड वैनिला जावास्क्रिप्ट का उपयोग करता है। यह एक नया <style> तत्व बनाता है यह उस तत्व की पाठ सामग्री सेट करता है जिसमें नई सीएसएस युक्त स्ट्रिंग हो। और यह उस तत्व को सीधे आइफ्रेम दस्तावेज़ के सिर पर जोड़ता है।

 var iframe = document.getElementById('the-iframe'); var style = document.createElement('style'); style.textContent = 'body {' + ' background-color: some-color;' + ' background-image: some-image;' + '}' ; iframe.contentDocument.head.appendChild(style); 

शायद यह अब बदल गया है, लेकिन मैंने इस तत्व के साथ एक अलग स्टाइलशीट का उपयोग किया है:

 .feedEkList iframe { max-width: 435px!important; width: 435px!important; height: 320px!important; } 

सफलतापूर्वक शैली यूट्यूब iframes एम्बेडेड … इस पृष्ठ पर ब्लॉग पोस्ट देखें।

अपने आइफ्रेम पृष्ठ को एक आईडी दें (या यदि आप चाहें तो वर्ग)

 <html> <head></head> <body id="myId"> </body> </html> 

फिर, iframe के पृष्ठ के भीतर, उसमें एक पृष्ठभूमि को सीएसएस में निर्दिष्ट करें

 #myId { background-color: white; }