दिलचस्प पोस्ट
आईओएस 8 पर एंटरप्राइज़ ऐप अद्यतन वितरण Django में डायनामिक फ़ाइल पथ एसक्यूएल सर्वर: मामला जब या उसके बाद => या समर्थित नहीं है जावा में दो तिथियों के बीच के दिनों में अंतर? जावास्क्रिप्ट में MM / dd / yyyy को प्रारूप दिनांक सी +11 रेंज आधारित पाश: मूल्य द्वारा आइटम प्राप्त करें या const के संदर्भ में समूहीकृत परिणामों के प्रत्येक समूह के लिए शीर्ष एन रिकॉर्ड प्राप्त करें ईएफ 4.x DbContext जनरेटर के साथ संपत्ति परिवर्तन सूचनाएं कैसे प्राप्त करें .apk पैकेज में AndroidManifest.xml फ़ाइल को पार्स करने के तरीके एसआईएम द्वारा MySQL ग्रुप स्ट्रिंग के अंतिम भाग को बदलें मेमोरी में सुरक्षित रूप से मिटाना पासवर्ड (पायथन) स्विफ्ट में, मैं दोनों विकल्प और शून्य वस्तु संदर्भों से कैसे बचूं? स्मृति के साथ एक समारोह का निर्माण करने का सबसे अच्छा तरीका कैसे 2d सरणी के लिए एक 1d सरणी कन्वर्ट करने के लिए?

Iframe में सीएसएस कैसे लागू करें?

मेरे पास एक सरल पृष्ठ है, जिसमें कुछ आइफ्रेम अनुभाग हैं (आरएसएस लिंक प्रदर्शित करने के लिए)। मैं मुख्य पृष्ठ से एक ही सीएसएस प्रारूप को iframe में प्रदर्शित पेज पर कैसे लागू कर सकता हूं?

वेब के समाधान से एकत्रित समाधान "Iframe में सीएसएस कैसे लागू करें?"

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

यहां दो अलग चीजें हैं: आइफ्रेम ब्लॉक की शैली और आइफ्रेम में एम्बेड किए गए पृष्ठ की शैली। आप सामान्य तरीके से 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['frame1'].document.body.appendChild(cssLink); 

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

सौभाग्य से, एंबेड कोड के यूआरएल को सीधी पहुंच पर कोई प्रतिबंध नहीं था, इसलिए 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); 

(यह आपके स्टाइलशीट को अंतिम अंत टैग के ठीक पहले रखेगा।)

सीएसएस के मामले में मूल यूआरएल को मूल यूआरएल को निर्दिष्ट करें और जेएस को अपेक्षाकृत कहा जाता है:

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

अंतिम google.php फ़ाइल इस तरह 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> 

सौभाग्य!

अगर 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); 

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

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

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

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

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

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

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

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

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

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

 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 के साथ ठीक काम करता है

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

यह 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 के वितरण के लिए उन्हें भरोसा करना है;)

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

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

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

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

फ्रेम सामग्री लोड करने में किसी भी देरी से निपटने के लिए ऊपर 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(); }); 

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

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

 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="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>'); doc.close(); 

हम स्टाइल टैग को 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> 

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

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

और फिर iframe में ऐसा करते हैं (जेएस ऑनलोड देखें)

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

और जेएस में

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

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

अन्य जवाब यहां jQuery और सीएसएस लिंक का उपयोग करने लगते हैं।

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

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

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

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

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

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

यह तब भी काम करता है जब आईफ्रेम भिन्न डोमेन लोड कर रहा हो

पोस्ट postMessage() बारे में जांच करें

योजना है, सीआरएस को आइफ्रेम के रूप में एक संदेश के रूप में भेजें

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

* इस संदेश को भेजने के लिए है कि आईफ़्रेम में कौन से डोमेन है

और आईफ़्रेम में संदेश प्राप्त करें और उस दस्तावेज़ सिर पर प्राप्त संदेश (सीएसएस) जोड़ें

iframe पृष्ठ में जोड़ने के लिए कोड

 window.addEventListener('message',function(e){ if(e.data == 'send_user_details') document.head.appendChild('<style>'+e.data+'</style>'); }); 

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

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

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

यहां छवि विवरण दर्ज करें

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

 // 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">' }); 

सबसे अच्छा तरीका निम्न हो सकता है (यदि आप लक्ष्य साइट को नियंत्रित करते हैं):

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

 http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D 

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

2) इस तरह रिसीवर पेज target.php सेट:

 <head> .......... <style><? echo urldecode($_GET['style']);?> </style> .......... 
 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); 

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

  1. आइफ्रेम अनुभाग
  2. आईफ्रेम के अंदर लोड किया गया पृष्ठ

तो आप उन दो वर्गों को निम्नानुसार शैली बनाना चाहते हैं,

1. आइफ्रेम अनुभाग के लिए शैली

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

 <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. आइफ्रेम के अंदर लोड किए गए पेज को स्टाइल करें

यह शैलियाँ जावास्क्रिप्ट की सहायता से माता-पिता के पृष्ठ से भरी जा सकती हैं

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

तब सेट आईफ़्रेम अनुभाग में सीएसएस फ़ाइल सेट करें

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

यहां, आप इस तरह से भी आइफ्रेम के अंदर पृष्ठ के प्रमुख भाग को संपादित कर सकते हैं

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

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

https://github.com/cssobj/cssobj

यह जेएस ऑब्जेक्ट सीएसएस के रूप में आईफ्रेम को गतिशील रूप से इंजेक्ट कर सकता है

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

  1. एक iframe रखने के लिए एक वर्ग के साथ div
  2. div को iframe जोड़ें
  3. सीएसएस फ़ाइल में,
 divClass { width: 500px; height: 500px; } divClass iframe { width: 100%; height: 100%; } 

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