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

Question

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

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

iframeसंपादक में कब के शरीर का एक वर्ग है जिसका उपयोग कहीं और नहीं किया जाता है, इसलिए मैं मान रहा हूं कि इसे वहां रखा गया था ताकि इस तरह की समस्याओं को हल किया जा सके। हालाँकि, जब मैं शैलियों को लागू करता हूं class.bodyतो वे शरीर पर लागू शैलियों को ओवरराइड नहीं करते हैं। अजीब बात यह है कि स्टाइल फायरबग में दिखाई देते हैं, इसलिए मुझे नहीं पता कि क्या चल रहा है!

धन्यवाद

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

Comments

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

— 2540625

हालांकि, किसी भी iframe में कुछ भी छूना संभव नहीं है, उस URL को अजाक्स में प्रति <div>बार लोड करना एक वर्कअराउंड हो सकता है (यदि दिए गए CORS-Header इसके लिए अनुमति दे रहे हैं) ... (और it sangeizing "लोड किए गए डेटा को regepp पर" रास्ता। हाँ, सभी हैक ...)

— फ्रैंक Nocke

यदि आप पेज डोमेन से मेल खाते हैं तो आप जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन सिर्फ अपने रंग को बदलने के लिए अपने आंतरिक पेज के HTML में एक स्टाइल ब्लॉक क्यों नहीं डालें? बस अपने ओवरराइड में अधिक चयनकर्ताओं को जोड़ें या महत्वपूर्ण का उपयोग करें! अगर बाकी सब विफल हो जाता है, तो आप केवल एक पृष्ठ पर किसी भी रंग शैलियों को ओवरराइड करना चाहते हैं ...

— ओ जी सीन

Answer 1

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

जैसा कि दूसरों ने कहा है, आपके विकल्प हैं:

• आवश्यक सीएसएस iframe में भरी जा रही फ़ाइल दें
• यदि iframe में फ़ाइल आपके माता-पिता के समान डोमेन से है, तो आप माता-पिता से iframe में दस्तावेज़ के DOM तक पहुँच सकते हैं।

Answer 2

नीचे केवल तभी काम होता है यदि iframe सामग्री एक ही मूल डोमेन से हो।

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

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

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

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

Comments

@ SimpleSam5 क्या आप जावास्क्रिप्ट विकल्प प्रदान कर सकते हैं (Jquery का उपयोग किए बिना)?

— कमलाकन्नन J

@sincerekamal यहां jQuery की आवश्यकता के बिना कोड है: jsfiddle.net/9g9wkpon आपको बस यह जानना होगा कि मेरे उदाहरण की तरह, जावास्क्रिप्ट में कैमलकेस में हाइफ़न किए गए CSS गुण लिखे गए हैं। :)

— डेनिस 98

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

— एलेक्स स्टैनसी

@AlexStanese जेरेमी के रूप में कहता है, यह केवल तभी काम करता है जब iframe पेज मूल सर्वर के समान सर्वर से आ रहा है ... जिसका आमतौर पर मतलब है कि आपको जावास्क्रिप्ट वैसे भी परेशान करने की आवश्यकता नहीं है ... बस CSS को दूसरे पृष्ठ पर जोड़ें पहली जगह में।

— डीए।

@KamalakannanJ आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता नहीं है। बस उस पृष्ठ को संपादित करें जो iFrame में है और सीएसएस को वहां रखें।

— डीए।

Answer 3

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

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

Comments

'सीधी पहुँच' से आपका क्या तात्पर्य है? Iframe में पेज मेरी साइट, उसके सभी एक डोमेन से है।

— jd6699

तो फिर आपको अपनी साइट पर स्रोत फ़ाइल को बदलने की आवश्यकता होगी (आप एक iframe में किसी भी सामग्री को संशोधित नहीं कर सकते हैं) - इसलिए यदि iframe mysite.com/test.html पर इंगित कर रहा है, तो आपको सीधे test.html को संशोधित करना होगा। ।

— माइल ग्रे

नही सकता? शर्तों के तहत ओपी कहते हैं कि आप कर सकते हैं। उदाहरण के लिए, उसका आंतरिक iframe URL उसकी मूल साइट के समान है, इसलिए उसे आपके द्वारा पसंद किए गए जावास्क्रिप्ट के किसी भी स्वाद के साथ DOM ok का उपयोग करने में सक्षम होना चाहिए ...

— OG Sean

@ शैलियाँ ग्रे गलत। यदि आप जावास्क्रिप्ट और सीएसएस दोनों के साथ एक ही डोमेन पर हैं, तो आप सामग्री को इट्रॉम पेज से iframe में संशोधित कर सकते हैं।

— केविन एम

Answer 4

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

यह मूल रूप से "एक और पेज" है।

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

Comments

हाँ, आप जावास्क्रिप्ट के साथ कर सकते हैं। ध्यान दें कि यह iframe URL और समान डोमेन साझा करने वाले मूल URL के साथ सबसे अच्छा काम करता है। लेकिन, मुझे लगता है कि आप यह इंगित करने में सही हैं कि यह केवल iframe के अंदर पृष्ठ पर CSS के साथ किया जा सकता है।

— ओजी सीन

Answer 5

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

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

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

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(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

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

Comments

मुझे संदेह है कि यह केवल इसलिए काम करता है क्योंकि तवाक के लोगों ने स्पष्ट रूप से इसकी अनुमति दी है।

— लॉयरसन

@CPHPython शायद आप मेरी मदद कर सकते हैं। इसे देखें: stackoverflow.com/questions/60923168/…

— सफलता मैन

Answer 6

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

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

Comments

Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.मुझे डर है कि यह काम नहीं करेगा

— माइक

Answer 7

यदि आपके पास iframe होस्ट करने वाले पेज और iframe के पेज का नियंत्रण है, तो आप iframe को क्वेरी पैरामीटर पास कर सकते हैं ...

होस्टिंग साइट मोबाइल है या नहीं, इसके आधार पर iframe में एक क्लास जोड़ने का एक उदाहरण है ...

IFrame जोड़ना:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

अंदर iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

Comments

शायद आप मेरी सहायता कर सकते हैं। इसे देखें: stackoverflow.com/questions/60923168/…

— सफलता आदमी

Answer 8

मेरे पास एक ब्लॉग है और मुझे यह पता लगाने में बहुत परेशानी होती है कि मेरे एम्बेडेड जिस्ट का आकार कैसे बदल सकता है। पोस्ट मैनेजर केवल आपको पाठ लिखने, चित्र लगाने और HTML कोड एम्बेड करने की अनुमति देता है। ब्लॉग लेआउट ही उत्तरदायी है। यह Wix के साथ बनाया गया है। हालाँकि, एम्बेडेड HTML नहीं है। मैंने बहुत कुछ पढ़ा कि कैसे उत्पन्न iFrames के शरीर के अंदर घटकों का आकार बदलना असंभव है। तो, यहाँ मेरा सुझाव है:

यदि आपके पास केवल आपके iFrame के अंदर एक घटक है, यानी आपका जिस्ट, तो आप केवल जिस्ट का आकार बदल सकते हैं। IFrame के बारे में भूल जाओ।

मुझे व्यूपोर्ट, विभिन्न उपयोगकर्ता एजेंटों के लिए विशिष्ट लेआउट की समस्याएं थीं और यही मेरी समस्या का समाधान करती है:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

तर्क उपयोगकर्ता एजेंट के आधार पर जीआईएस (या आपके घटक) को सेट करने के लिए है। क्वेरी चयनकर्ता को लागू करने से पहले, पहले अपने घटक की पहचान करना सुनिश्चित करें। एक नज़र रखना कि जवाबदेही कैसे काम कर रही है ।

Answer 9

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

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

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

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं।

— शफुल इस्लाम

यह केवल iFrame तत्व पर ही लागू होता है - प्रश्न विशेष रूप से iFrame सामग्री के बारे में पूछता है, जिसे वर्तमान में अकेले CSS के माध्यम से बदलना संभव नहीं है।

— pwdst

@ShaifulIslam जो हुआ ठीक है। टेम्परिंग टिम बेकार का जवाब देते हैं।

— एलेक्स फॉक्सलेह

Answer 10

अपने आइफ्रेम पेज की बॉडी को एक आईडी (या यदि आप चाहें तो कक्षा) दें

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

फिर, iframe के पेज में भी, CSS में एक बैकग्राउंड असाइन करें

#myId {
    background-color: white;
}

Comments

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

— jd6699

मेरा मतलब है कि क्या वह पृष्ठ है जिसे आप अपनी साइट से और अपने नियंत्रण में iFrame में लोड कर रहे हैं? या यह बाहरी साइट से है कि आप उस आईडी / वर्ग को शामिल करने के लिए स्रोत को संपादित नहीं कर सकते।

— माइक

यह मेरी साइट से है, लेकिन जैसा कि संपादक द्वारा किया गया है, यह उस चिह्न को बदलना आसान नहीं होगा जो इसके माध्यम से खींचा गया है।

— jd6699

ps I didn का मतलब आपके मुख्य पृष्ठ पर id = "myId" जोड़ना है, लेकिन iFrame के भीतर पृष्ठ पर। इस तरह आप iFrame पेज की बॉडी को एक अलग स्टाइल से अपने मुख्य पेज पर टारगेट कर सकते हैं। आप अपने iFrame पृष्ठों में सीएसएस फ़ाइल का भी संदर्भ दे रहे हैं। आपको iFrame में लोड किए गए पृष्ठ को पूरी तरह से स्वतंत्र पृष्ठ के रूप में मानना ​​होगा। यदि आप उस पृष्ठ को वेब ब्राउज़र में लोड करते हैं तो क्या इसकी सही शैली है?

— माइक

Im वास्तव में निश्चित नहीं है कि 'पृष्ठ' वह नहीं है जितना कि सम्पूर्ण पृष्ठ संपादक उपयोग करता है। आपकी मदद के लिए धन्यवाद, मुझे लगता है कि मैं समझता हूं कि यह सब सामान कैसे काम करता है।

— jd6699