किसी पृष्ठ पर src विशेषता के बजाय एक iframe की सामग्री निर्दिष्ट करना

88

मैं वर्तमान में एक ऐसे फ़ॉर्म पर काम कर रहा हूं जिसमें चित्रों को अपलोड करने के लिए कुछ फ़ाइल इनपुट शामिल हैं। onchange()उन इनपुटों के लिए एक घटना है जो चित्रों को एक में जमा करता है iframe, फिर अपलोड की गई तस्वीरों को फॉर्म में लोड करता है, उनके लिए फ़ील्ड संशोधित किए जाते हैं (जैसे नाम और भू-स्थानीयकरण )।

चूंकि मैं घोंसला नहीं बना सकता, इसलिए file_inputयह भी एक में निहित है iframe। अंत में मैं iframeदूसरे के अंदर का उपयोग करता हूं iframe। तो मेरे पास कुछ इस तरह है:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

और HTML में लोड iframeकुछ ऐसा है (को छोड़कर html, headऔर bodyटैग)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

यह इस तथ्य को छोड़कर महान काम करता है कि पहले लोड करने में कुछ सेकंड लगते हैं iframe, इसलिए फ़ाइल इनपुट शेष पृष्ठ के साथ लोड नहीं होता है। यह नेत्रहीन आदर्श नहीं है। यदि मैं iframeकिसी अन्य पृष्ठ को लोड करने की आवश्यकता के बिना सामग्री निर्दिष्ट कर सकता था ( file_input_urlपहले में निर्दिष्ट iframe) मैं इसे हल कर सकता था ।

क्या एक iframeही दस्तावेज़ में सामग्री को निर्दिष्ट करने का एक तरीका है , या क्या इसे केवल srcविशेषता के साथ निर्दिष्ट किया जा सकता है , दूसरे पृष्ठ के लोड की आवश्यकता है?

html iframe

— orlox
स्रोत

यह उस iframe को लोड करने के लिए "कुछ सेकंड" नहीं लेना चाहिए। मुझे उम्मीद है कि यह एक मिलीसेकंड के दसवें प्लस के समान होगा "काटने का समय" (जो कि मिलीसेकंड भी होना चाहिए)। आपको इसकी जांच करनी चाहिए कि सभी अंतराल क्या हैं - शायद आपके सर्वर में कुछ गड़बड़ है।

— अभि बेकर्ट

95

आप .write()iframe दस्तावेज़ में सामग्री कर सकते हैं । उदाहरण:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— Guffa
स्रोत

1

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

— orlox

2

@orlox: Ajax का उपयोग कर सर्वर से अपनी सामग्री प्राप्त करें और इसे इंजेक्ट करें। आपको लगता है कि जिस तरह से जाने के लिए नहीं करना चाहते हैं, एक छिपा कर divअपनी सामग्री के साथ तत्व और में अपनी सामग्री जगह iframeके बीच <body>और </body>।

— स्टैक्युलर

11

जितना अधिक मैं iframes के बारे में सीखता हूं उतना ही मैं उनसे नफरत करता हूं

— John Magnolia

1

मैं इस विधि का उपयोग करके एकल उद्धरण कैसे बच सकता हूं? उनमें से कुछ HTML- महत्वपूर्ण (जैसे वर्ग = 'उदाहरण') हैं, कुछ सीएसएस-महत्वपूर्ण हैं (जैसे फ़ॉन्ट-परिवार: 'डडाना';) और कुछ सामग्री हैं (जैसे जॉर्ज ओ'मैले)।

— डैन बेहार्ड

2

@ डान: एपोस्ट्रोप सीमांकित जावास्क्रिप्ट स्ट्रिंग में उपयोग किए जाने वाले किसी भी मूल्य से बचने के लिए, आप पहले बैकस्लैश, फिर एपोस्ट्रोफ से बचते हैं। कोड में स्ट्रिंग को आउटपुट करने के लिए C # का उपयोग करने वाले उदाहरण के लिए doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');:।

— गुफ़ा

36

iframe अब srcdoc का समर्थन करता है जिसका उपयोग इनलाइन फ्रेम में दिखाने के लिए पृष्ठ की HTML सामग्री को निर्दिष्ट करने के लिए किया जा सकता है।

— आयुष गुप्ता
स्रोत

2

IE इस अधिकार का समर्थन नहीं करता है, लेकिन आप इस पर नवीनतम स्थिति के लिए caniuse की जाँच कर सकते हैं ।

— आयुष गुप्ता

— एमडीएन

22

आप इसमें data:URL का उपयोग कर सकते हैं src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

स्निपेट का विस्तार करें

Srcdoc = "..." और src = "data: text / html, ..." के बीच अंतर ।

HTML को डेटा में कनवर्ट करें: जावास्क्रिप्ट का उपयोग करके टेक्स्ट / html लिंक ।

— उपयोगकर्ता
स्रोत

1

आपको किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है: srcविशेषता को इनलाइन में निर्दिष्ट किया जा सकता है यदि बच जाता है जैसे rawurlencodeकि PHP में उपयोग किया जाता है:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— जेक

Microsoft ने इसके लिए समर्थन उसी समय जोड़ा srcdoc, जब उन्होंने इसके लिए समर्थन जोड़ा , और srcdocऐसा करने का बेहतर तरीका है। डेटा यूआरएल केवल छवियों और सीएसएस के लिए व्यापक रूप से समर्थित हैं - जहां तक मुझे पता है कि इंटरनेट एक्सप्लोरर का कोई संस्करण आईफ्रेम में उनका समर्थन नहीं करता है।

— अभि बेकर्ट

6

गुफ़ा ने जो वर्णन किया है, उसके संयोजन में, आप HTML दस्तावेज़ को एक विशेष तत्व में संग्रहीत करने के लिए <script type = "text / template"> ... </ script> के वर्णन में वर्णित तकनीक का उपयोग कर सकते हैं script(स्पष्टीकरण के लिए लिंक देखें) यह कैसे काम करता है)। यह एक स्ट्रिंग में HTML दस्तावेज़ को संग्रहीत करने की तुलना में बहुत आसान है।

— Ximo
स्रोत

दूसरे विचार पर, यह एक पूर्ण HTML दस्तावेज़ के लिए बहुत अच्छा काम नहीं करेगा। जैसे टैग <html>, <body>, <script>केवल ब्राउज़र को भ्रमित हैं, दस्तावेज़ के प्रतिपादन तोड़ दिया।

— जिमो

यह एक समस्या नहीं लगती है, स्क्रिप्ट के अंदर HTML टैग्स को नजरअंदाज कर दिया जाता है।

— HBP

आप सही हैं :) मैंने वास्तव में तकनीक की कोशिश नहीं की थी जब मैंने लिखा था, और कहीं से उस धारणा को उठाया होगा। मुझे बाद में पता चला कि एक <script>टैग के भीतर कुछ भी ब्राउज़र द्वारा अनदेखा किया जाएगा .. मुझे सही करने के लिए धन्यवाद!

— जिमो