CSS को iframe में कैसे लागू करें?

Question

मेरे पास एक सरल पृष्ठ है जिसमें कुछ iframe सेक्शन हैं (RSS लिंक प्रदर्शित करने के लिए)। मैं iframe में प्रदर्शित मुख्य पृष्ठ से उसी CSS प्रारूप को कैसे लागू कर सकता हूं?

Comments

यह संभव है लेकिन केवल अगर iframe का डोमेन माता

— gawpertron

gawpertron, बस स्पष्ट करने के लिए, क्या आप कह रहे हैं कि अगर मैं किसी अन्य डोमेन से iFrame सामग्री का उपयोग करता हूं जिसे मैं नियंत्रित नहीं करता हूं, तो मेरे लिए उस सामग्री के लिए CSS को नियंत्रित करने का कोई तरीका नहीं है?

— विले M

क्या आप पृष्ठ का एक लिंक सूचीबद्ध कर सकते हैं ताकि हम केवल हमारे परिवर्तनों को देख सकें।

डोमेन, पोर्ट और प्रोटोकॉल एक ही होना चाहिए, या तो उप-डोमेन के साथ काम नहीं करता है।

— ली पेनकेमैन

Answer 1

संपादित करें: यह तब तक क्रॉस डोमेन पर काम नहीं करता है जब तक कि उपयुक्त कोर हेडर नहीं है सेट न हो।

यहाँ दो अलग-अलग चीज़ें हैं: iframe ब्लॉक की शैली और iframe में एम्बेडेड पृष्ठ की शैली। आप iframe की शैली को सामान्य तरीके से सेट कर सकते हैं:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

Iframe में एम्बेड किए गए पृष्ठ की शैली को या तो इसे चाइल्ड पेज में शामिल करके सेट किया जाना चाहिए:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

या इसे जावास्क्रिप्ट के साथ मूल पृष्ठ से लोड किया जा सकता है:

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

Comments

कृपया ध्यान दें, मुझे ऐसा लगता है कि पहले से पोस्ट किए गए कुछ उदाहरण HTML5 के लिए अब अमान्य हैं। इस प्रकार आप फ्रेम के सामग्री का उपयोग कर सकते हैं: document.getElementById("myframe").contentDocument। सीएसएस को एम्बेड करना अभी भी मेरे लिए काम नहीं करता है।

— रेहो लिंडके 19

लिंक केवल HEAD

— Knu

मेरे लिए तभी काम किया जब मैंने किया ...document.head.appendChild(cssLink)- फ़ायरफ़ॉक्स और सफारी।

— मोजुबा

क्या यह वास्तव में क्रॉस-डोमेन का काम करता है? मुझे नहीं लगता कि यह होगा।

— साइमन ईस्ट

बस इसलिए नंबर 1 को यह पता लगाने के लिए परीक्षण करना होगा: सही है, यह क्रॉस-डोमेन काम नहीं करता है। तख्ते करने के तुरंत बाद ['नाम'] आप "URL ब्ला के साथ फ्रेम से URL ब्लाह के साथ फ्रेम तक पहुँचने के लिए असुरक्षित जावास्क्रिप्ट प्रयास करें। डोमेन, प्रोटोकॉल और बंदरगाहों का मिलान होना चाहिए।"

— केविन

Answer 2

मैं इस मुद्दे को Google कैलेंडर के साथ मिला था । मैं इसे एक गहरे रंग की पृष्ठभूमि और परिवर्तन फ़ॉन्ट पर शैली देना चाहता था।

सौभाग्य से, एम्बेड कोड के URL में प्रत्यक्ष पहुंच पर कोई प्रतिबंध नहीं था, इसलिए PHP फ़ंक्शन का उपयोग करके file_get_contentsपृष्ठ से संपूर्ण सामग्री प्राप्त करना संभव है। Google URL को कॉल करने के बजाय, अपने सर्वर पर स्थित php फ़ाइल को कॉल करना संभव है, पूर्व। google.php, जिसमें संशोधनों के साथ मूल सामग्री होगी:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

अपनी स्टाइलशीट में पथ जोड़ना:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(यह आपकी स्टाइलशीट के ठीक पहले लाएगा head टैग लाएगा।)

बेस url को निर्दिष्ट करें मामले में मूल url css और js को अपेक्षाकृत कहा जाता है:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

अंतिम google.phpफ़ाइल इस तरह दिखनी चाहिए:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

तब तुम बदल जाते हो iframe एम्बेड कोड को इसमें :

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

सौभाग्य!

Comments

आप चाहें तो उस हैकिंग को परिभाषा के अनुसार कह सकते हैं। लेकिन आपने कोई बेहतर समाधान पेश नहीं किया ... यह समाधान Google सेवा को नुकसान पहुंचाने या लोगों को अपनी कमजोरी का फायदा उठाने के तरीके से बरगलाने का एक तरीका नहीं है।

— SequenceDigitale.com

मैं इस समाधान को Google डॉक्स के साथ काम करने के तरीके के लिए मारूंगा। यह जावास्क्रिप्ट त्रुटियों के सभी प्रकार फेंक रहा है। : "Uncaught TypeError गुण अपरिभाषित की 'एक' पढ़ा नहीं जा सकता"

— deweydb

कोई बात नहीं, मैंने इसे सुलझा लिया, यहाँ समाधान पोस्ट किया: stackoverflow.com/questions/25395279/…

— deweydb

@ क्रिसहटन एफवाईआई, यह मूल रूप से नहीं है। हालाँकि, यह पूरे iframe व्यर्थ को रेंडर कर सकता है (उदाहरण के लिए, iframes का उपयोग करने का एक कारण, सुरक्षा उद्देश्यों के लिए है, उदाहरण के लिए कार्ड से भुगतान, और यदि आप ऐसा करने का सुझाव देते हैं, तो आप अपने आप को समस्याएँ पैदा करेंगे)।

— alastair

ऐसा करने से आप हमेशा कैलेंडर को गैर-लॉग इन उपयोगकर्ता के रूप में प्राप्त कर रहे हैं। सामान्य html iframe के साथ यदि उपयोगकर्ता Google में लॉग इन किया गया था, तो उपयोगकर्ता अपना निजी कैलेंडर देखेगा, लेकिन चूंकि आपका PHP कोड उपयोगकर्ताओं को Google सत्र आईडी नहीं जान सकता है, इसलिए यह उनके निजी कैलेंडर को नहीं ला सकता है।

— bdsl

Answer 3

अगर iframe की सामग्री पूरी तरह से आपके नियंत्रण में नहीं है या आप अलग-अलग पेजों से कंटेंट को विभिन्न शैलियों के साथ एक्सेस करना चाहते हैं, तो आप जावास्क्रिप्ट का उपयोग करके इसे हेरफेर करने की कोशिश कर सकते हैं।

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

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

Comments

ध्यान देने योग्य बात यह हो सकती है कि यदि पृष्ठ किसी भिन्न डोमेन पर हो तो वही मूल नीति इस कार्य को रोक देगी।

— कॉनरॉय

सोच की एक ही पंक्ति में लेकिन अधिक रसीला: <iframe onload="this.contentDocument.body.style.overflow='hidden';" />

— रक्षक एक

यहां तक ​​कि फ़ायरफ़ॉक्स को

Answer 4

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

Comments

@deweydb i ने इसे क्रॉस डोमेन iframe के साथ विशेष रूप से उपयोग किया है। लेकिन मैं केवल आपकी क्षमा मांग सकता हूं!

— रामी सरदिदीन

@ramie और आपने कई ब्राउज़रों में परीक्षण किया है? अधिकांश ब्राउज़र सुरक्षा त्रुटि फेंक रहे हैं।

— डेवीडब

मैंने पहले इस विचार को देखा था, लेकिन इसके वास्तव में महान और पेशेवर ... + अप को दर्ज करने के लिए एक लिंक जोड़ें

— J.Tural

Answer 5

एक आइफ्रेम सार्वभौमिक रूप से अधिकांश ब्राउज़रों द्वारा एक अलग HTML पृष्ठ की तरह संभाला जाता है। यदि आप iframe की सामग्री के लिए एक ही स्टाइलशीट लागू करना चाहते हैं, तो इसे वहां उपयोग किए गए पृष्ठों से संदर्भित करें।

Comments

@hangry लेकिन ... कैसे?

— भगवान का बच्चा १ A

Answer 6

यहाँ <link>एक अतिरिक्त स्टाइलशीट लोड करने के लिए बिना सीएसएस कोड को सीधे लागू करने का तरीका बताया गया है ।

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

यह iframe पेज में बैनर छुपाता है। आपके सुझावों के लिए धन्यवाद!

Comments

क्या यह आईडी के साथ एक आइफ्रेम की जरूरत है iframe?

— जेरेमी

@jmalais बस के #iframeसाथ #<id>या यहां तक ​​कि iframeसभी iframes का चयन करने के लिए

— Zeb मैककॉर्ले

यह मेरे लिए काम नहीं कर रहा है। आईफ्रेम जो मैं संपादित करने की कोशिश कर रहा हूं, वह सीधे डोम में इसके नीचे सिर नहीं है। तो क्या इसका मतलब यह है कि मुझे HTML दस्तावेज़ के अंदर सिर तक पहुंचने की आवश्यकता है या क्या ऐसा कुछ है जो कि jquery खोज फ़ंक्शन को स्वयं करने में सक्षम होना चाहिए?

— डेविड ए। फ्रेंच

कंसोल की जाँच की और ऐसा लग रहा है कि यह एक डोमेन बेमेल के कारण iframe सामग्री तक पहुँचने से अवरुद्ध है। मैं क्रोम का उपयोग कर रहा हूं और वर्तमान में अपने देव वातावरण की मेजबानी कर रहा हूं।

— डेविड ए। फ्रेंच

बिना पका हुआ DOMException: उत्पत्ति के साथ एक फ्रेम को ब्लॉक करने से मुझे यह त्रुटि मिलती है

— priyanka patel

Answer 7

यदि आप iframe में पेज को नियंत्रित करते हैं, जैसा कि हैंगी ने कहा, सबसे आसान तरीका सामान्य शैलियों के साथ साझा सीएसएस फ़ाइल बनाना है, तो बस इसे अपने HTML पृष्ठों से लिंक करें।

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

यह ट्यूटोरियल आपको सामान्य रूप से iframes की स्क्रिप्टिंग के बारे में अधिक जानकारी प्रदान कर सकता है। क्रॉस फ़्रेम स्क्रिप्टिंग के बारे में IE परिप्रेक्ष्य से सुरक्षा प्रतिबंधों की व्याख्या करता है।

Answer 8

थोड़ा बदलाव के साथ ऊपर काम करता है:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

कम से कम ff3 और ie8 के साथ ठीक काम करता है

Comments

MyData क्या है और यह कहां से आता है

— Tigran

@ इसके लिए हैdynamic data

— आकाश

Answer 9

यदि आप मुख्य पृष्ठ से CSS और JavaScript का पुन: उपयोग करना चाहते हैं, तो शायद आपको प्रतिस्थापित करने पर विचार करना चाहिए <IFRAME> Ajax लोड की गई सामग्री के साथ करने । यह अब अधिक एसईओ अनुकूल है जब खोज बॉट जावास्क्रिप्ट निष्पादित करने में सक्षम हैं।

यह jQuery का उदाहरण है जिसमें आपके दस्तावेज़ में एक और HTML पृष्ठ शामिल है। यह बहुत अधिक एसईओ अनुकूल है iframe। यह सुनिश्चित करने के लिए कि बॉट्स शामिल पृष्ठ को अनुक्रमणित नहीं कर रहे हैं, बस इसे हटाने के लिए जोड़ देंrobots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

आप Google से सीधे jQuery को भी शामिल कर सकते हैं: http://code.google.com/apis/ajaxlibs/documentation/ - इसका अर्थ है नए संस्करणों के वैकल्पिक ऑटो-समावेश और कुछ महत्वपूर्ण गति में वृद्धि। इसके अलावा, इसका मतलब है कि आपको सिर्फ jQuery देने के लिए उन पर भरोसा करना होगा;)

Comments

किसी को यह ध्यान रखना चाहिए कि यदि पृष्ठ की सामग्री किसी भी तरह से गतिशील है तो यह समाधान काम नहीं करता है।

— निकडंक

Answer 10

निम्नलिखित ने मेरे लिए काम किया।

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

Comments

त्रुटि:Uncaught TypeError: Cannot read property 'open' of undefined

— KingRider

Answer 11

फ्रेम सामग्री लोड करने में किसी भी देरी से निपटने के लिए उपरोक्त jQuery समाधान पर विस्तार करना।

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

Comments

काम करने के लिए '$ this' को '$ (इस)' होने की आवश्यकता है। जब यह अच्छा लगता है :)

— h34ates

Answer 12

मेरा कॉम्पैक्ट संस्करण :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

हालांकि, कभी-कभी iframeलोड की गई विंडो पर तैयार नहीं होता है, इसलिए टाइमर का उपयोग करने की आवश्यकता है ।

रेडी-टू-यूज़ कोड (टाइमर के साथ):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... और jQuery लिंक:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

Answer 13

यहाँ अन्य उत्तर jQuery और CSS लिंक का उपयोग करते प्रतीत होते हैं।

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

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Answer 14

जब आप "doc.open ()" कहते हैं, तो इसका मतलब है कि आप iframe के अंदर जो भी HTML टैग लिख सकते हैं, इसलिए आपको HTML पेज के लिए सभी मूल टैग लिखने चाहिए और यदि आप अपने iframe हेड में CSS लिंक रखना चाहते हैं, तो बस लिखें इसमें सीएसएस लिंक के साथ iframe। मैं आपको एक उदाहरण देता हूं:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

Answer 15

उपयोग यह कोशिश कर सकते हैं:

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

Comments

यदि आपका iframe विभिन्न मूल से आता है, तो CORS तंत्र इस वर्कअराउंड की अनुमति नहीं देगा।

— मिस्टर एंडरसन

क्या होगा यदि iframe-url सभी स्थानों के लिए CORS सक्षम है?

— 20

Answer 16

आप इस तरह से iframe के कंटेंट को स्टाइल नहीं कर पाएंगे। मेरा सुझाव सर्वरसाइड स्क्रिप्टिंग (PHP, ASP, या पर्ल स्क्रिप्ट) का उपयोग करना होगा या एक ऑनलाइन सेवा खोजना होगा जो फ़ीड को जावास्क्रिप्ट कोड में बदल देगा। ऐसा करने का एकमात्र तरीका यह होगा कि यदि आप सर्वरसाइड शामिल कर सकते हैं।

Comments

सावधान जब आप कहते हैं कि कुछ नहीं किया जा सकता है, जब वास्तव में यह मुश्किल होता है

— लाथन

Answer 17

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

भले ही यह एक अलग डोमेन लोड कर रहा हो, तो भी यह काम करता है

के बारे में जाँच करें postMessage()

योजना है, जैसे संदेश के रूप में iframe में css भेजें

iframenode.postMessage('h2{color:red;}','*');

* आइफ्रेम में चाहे जो भी हो, इस संदेश को भेजना है

और iframe में संदेश प्राप्त करते हैं और प्राप्त संदेश (CSS) को उस दस्तावेज़ के प्रमुख में जोड़ते हैं।

iframe पेज में जोड़ने के लिए कोड

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

Answer 18

समान डोमेन के लिए कई उत्तर लिखे गए हैं, मैं लिखूंगा कि इसे क्रॉस डोमेन में कैसे किया जाए।

सबसे पहले, आपको पोस्ट संदेश एपीआई जानने की आवश्यकता है । हमें दो खिड़कियों के बीच संवाद करने के लिए एक संदेशवाहक की आवश्यकता है।

यहां मैंने एक संदेशवाहक बनाया है।

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

संवाद करने के लिए दो खिड़कियों में इसका उपयोग आपकी समस्या को हल कर सकता है।

मुख्य खिड़कियों में,

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

फिर, इफ्रेम से घटना प्राप्त करें।

इफ्रेम में:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

अधिक विवरण के लिए पूरा जावास्क्रिप्ट और आइफ्रेम ट्यूटोरियल देखें।

Answer 19

मुझे इस तरह से मुख्य HTML में शैली डालने के लिए एक और समाधान मिला

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

और फिर iframe में ऐसा करें (js onload देखें)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

और js में

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

यह सबसे अच्छा समाधान नहीं हो सकता है, और यह निश्चित रूप से सुधार किया जा सकता है, लेकिन यह एक और विकल्प है यदि आप एक "शैली" रखना चाहते हैं

Answer 20

यहां, डोमेन के अंदर दो चीजें हैं

1. iFrame अनुभाग
2. पेज को iFrame के अंदर लोड किया गया

तो आप उन दो वर्गों को निम्न प्रकार से स्टाइल करना चाहते हैं,

1. iFrame सेक्शन के लिए स्टाइल

यह उस सम्मान idया classनाम के साथ CSS का उपयोग करके स्टाइल कर सकता है । आप इसे अपने पैरेंट स्टाइल शीट में भी स्टाइल कर सकते हैं।

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. स्टाइल पेज iFrame के अंदर भरी हुई है

इस स्टाइल को जावास्क्रिप्ट पेज की मदद से मूल पृष्ठ से लोड किया जा सकता है

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

फिर उस सीएसएस फ़ाइल को सम्मानित iFrame सेक्शन में सेट करें

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

---

यहां, आप इस तरह से भी उपयोग करके iFrame के अंदर पेज के प्रमुख भाग को संपादित कर सकते हैं

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

Answer 21

हम iframe में स्टाइल टैग सम्मिलित कर सकते हैं। यहां भी पढ़ें ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

Comments

यह काम नहीं करता है। शैली टैग को सही ढंग से सम्मिलित करने के लिए लगता है, लेकिन इसके अंदर कोई सामग्री नहीं है और कोई आईडी नहीं है।

— darylknight

Answer 22

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

Comments

मैंने इस उत्तर को कई बार जाँचा है कि richTextFieldयहाँ क्या है ?

— किरणकुमार दफड़ा

यह आइफ्रेम नाम है

— जीव

मैंने कोशिश नहीं की, लेकिन मुझे लगता है कि सैंडबॉक्स के खिलाफ इसका कारण नहीं होगा

— Jeeva

Answer 23

मुझे लगता है कि सबसे आसान तरीका एक और div को जोड़ना है, उसी स्थान पर iframe, फिर

z-indexiframe कंटेनर से इसे बड़ा करें, ताकि आप आसानी से अपनी खुद की div स्टाइल कर सकें। यदि आपको उस पर क्लिक करने की आवश्यकता है, तो बस pointer-events:noneअपने स्वयं के div पर उपयोग करें, इसलिए यदि आपको क्लिक करने की आवश्यकता है तो iframe काम करेगा;)

मुझे आशा है कि यह किसी की मदद करेगा;)

Answer 24

एक अद्भुत लिपि है जो स्वयं के iframe संस्करण के साथ नोड को प्रतिस्थापित करती है। कोडपेन डेमो

उपयोग के उदाहरण:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

Comments

आप ऐसा क्यों करना चाहते हो?!

— डायलन वॉटसन 23

Answer 25

एक विकल्प के रूप में, आप सीएसएस-इन-जेएस तकनीक का उपयोग कर सकते हैं, जैसे कि नीचे दी गई लिबास:

https://github.com/cssobj/cssobj

यह JS ऑब्जेक्ट को CSS से iframe, डायनामिक रूप से इंजेक्ट कर सकता है

Answer 26

यह सिर्फ एक अवधारणा है, लेकिन सुरक्षा जांच और फ़िल्टरिंग के बिना इसे लागू नहीं करते हैं! अन्यथा स्क्रिप्ट आपकी साइट को हैक कर सकती है!

उत्तर: यदि आप लक्ष्य साइट को नियंत्रित करते हैं, तो आप रिसीवर स्क्रिप्ट को सेट कर सकते हैं जैसे:

1) styleपैरामीटर के साथ iframe लिंक सेट करें , जैसे:

http://your_site.com/target.php?color=red

(अंतिम वाक्यांश फ़ंक्शन a{color:red} द्वारा एन्कोड किया गया urlencodeहै।

2) target.phpइस तरह रिसीवर पृष्ठ सेट करें:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

Comments

चेतावनी: यह सबसे अच्छा इंजेक्शन है।

— कानो

हाँ, ऐसा न करें, सिवाय इसके कि आप अपने सर्वर पर पेन-टेस्ट बॉट्स और स्क्रिप्ट

— किडिज़ का

मैंने अभी उत्तर अपडेट किया है, अतिरिक्त सुरक्षा चेतावनी के साथ

— T.Todua

Answer 27

खैर, मैंने इन चरणों का पालन किया है:

1. धारण करने के लिए एक वर्ग के साथ विभाजित करें iframe
2. जोड़े iframeको div।
3. CSS फ़ाइल में,

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

IE 6 में यह काम करता है। अन्य ब्राउज़रों में काम करना चाहिए, जाँच करें!

Comments

iframe के अंदर div को नियंत्रित करने की आवश्यकता है, यह नहीं है

— MSD