2010-11-16 5 views
59

मैं वर्तमान में एक ऐसे फॉर्म पर काम कर रहा हूं जिसमें फ़ॉर्म के सभी सामान्य फ़ील्ड के अलावा चित्रों को अपलोड करने के लिए फ़ाइल इनपुट भी है, जो बदले में तस्वीर को आईफ्रेम पर सबमिट करता है , फिर अपलोड की गई तस्वीर को उनके रूप में संशोधित करने के लिए फॉर्म में अपलोड की गई तस्वीर को लोड करता है (जैसे नाम और भू-स्थानीयकरण)। चूंकि मैं घोंसला नहीं बना सकता, फ़ाइल_इनपुट भी आईफ्रेम में निहित है, इसलिए अंत में मैं आईफ्रेम के अंदर एक आईफ्रेम का उपयोग करता हूं। तो रेखाचित्र के रूप में, मैं कुछ इस तरह है:किसी पृष्ठ पर स्रोत के बजाय 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 में लोड (अनदेखी एचटीएमएल, सिर और शरीर टैग)

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

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

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

उत्तर

68

आप सामग्री को 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> 
+1

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

+2

@orlox: अजाक्स का उपयोग करके सर्वर से अपनी सामग्री प्राप्त करें और इसे इंजेक्ट करें। यदि आप इस तरह से नहीं जाना चाहते हैं, तो अपनी सामग्री के साथ एक छिपा 'div' तत्व बनाएं और' 'और '' के बीच' iframe' में अपनी सामग्री रखें। – stackular

+7

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

3

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

+0

दूसरे विचार पर, यह एक पूर्ण HTML दस्तावेज़ के लिए बहुत अच्छा काम नहीं करेगा। इस तरह के '' , के रूप में टैग '', ''

संबंधित मुद्दे