आप एक आइफ्रेम में डेटा कैसे पोस्ट करते हैं?
आप एक आइफ्रेम में डेटा कैसे पोस्ट करते हैं?
जवाबों:
निर्भर करता है कि आप "पोस्ट डेटा" से क्या मतलब है। आप target=""एक <form />टैग पर HTML विशेषता का उपयोग कर सकते हैं , इसलिए यह उतना ही सरल हो सकता है:
<form action="do_stuff.aspx" method="post" target="my_iframe">
<input type="submit" value="Do Stuff!">
</form>
<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>
यदि ऐसा नहीं है, या आप कुछ अधिक जटिल हैं, तो कृपया अपने प्रश्न को संपादित करें और अधिक विवरण शामिल करें।
इंटरनेट एक्सप्लोरर के साथ एक ज्ञात बग है जो केवल तब होता है जब आप गतिशील रूप से अपने आइफ्रेम इत्यादि का निर्माण कर रहे होते हैं, जावास्क्रिप्ट का उपयोग करते हुए (यहां एक काम-आस-पास ), लेकिन यदि आप साधारण HTML मार्कअप का उपयोग कर रहे हैं, तो आप ठीक हैं। लक्ष्य विशेषता और फ्रेम नाम कुछ चतुर निंजा हैक नहीं है; हालाँकि यह HTML 4 स्ट्रिक्ट या XHTML 1 स्ट्रिक्ट में पदावनत (और इसलिए मान्य नहीं होगा), यह 3.2 के बाद से HTML का हिस्सा है, यह औपचारिक रूप से HTML5 का हिस्सा है, और यह नेटस्केप 3 के बाद से हर ब्राउज़र के बारे में काम करता है।
मैंने इस व्यवहार को XHTML 1 सख्त, XHTML 1 संक्रमणकालीन, HTML 4 सख्त और "quirks मोड" में बिना किसी DOCTYPE के साथ काम करने के रूप में सत्यापित किया है, और यह इंटरनेट एक्सप्लोरर 7.0.5730.13 का उपयोग करके सभी मामलों में काम करता है। मेरे परीक्षण मामले में दो फाइलें शामिल हैं, IIS 6 पर क्लासिक एएसपी का उपयोग करके; वे यहां पूर्ण रूप से पुन: प्रस्तुत किए गए हैं ताकि आप अपने लिए इस व्यवहार को सत्यापित कर सकें।
default.asp
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Iframe Demo</title>
</head>
<body>
<form action="do_stuff.asp" method="post" target="my_frame">
<input type="text" name="someText" value="Some Text">
<input type="submit">
</form>
<iframe name="my_frame" src="do_stuff.asp">
</iframe>
</body>
</html>
do_stuff.asp
<%@Language="JScript"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Form Iframe Demo</title>
</head>
<body>
<% if (Request.Form.Count) { %>
You typed: <%=Request.Form("someText").Item%>
<% } else { %>
(not submitted)
<% } %>
</body>
</html>
मुझे ऐसे किसी भी ब्राउज़र के बारे में सुनने में बहुत दिलचस्पी होगी जो इन उदाहरणों को सही ढंग से नहीं चलाता है।
targetएक html के लिए विशेषता के रूप में सेट किया गया है आबाद करने में सक्षम है <form>। प्रपत्र पोस्ट होने के बाद और मैं लक्ष्य iframe में सामग्री देख सकता हूं, मैं इस सामग्री को फ़ाइल में सहेजने के लिए उपयोगकर्ता को एक विकल्प प्रदान करना चाहता हूं। यह वही है जो मैं पूछना चाहता था। मुझे पता है कि अगर यह अधिक स्पष्टता की जरूरत है।
एक iframe का उपयोग html पेज के अंदर किसी अन्य दस्तावेज़ को एम्बेड करने के लिए किया जाता है।
यदि फॉर्म को पेज के भीतर एक आइफ्रेम में जमा किया जाना है, तो टैग के लक्ष्य विशेषता का उपयोग करके इसे आसानी से प्राप्त किया जा सकता है।
फॉर्म की लक्ष्य विशेषता को iframe टैग के नाम पर सेट करें।
<form action="action" method="post" target="output_frame">
<!-- input elements here -->
</form>
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY">
</iframe>
उन्नत iframe लक्ष्य का उपयोग करें।
इस संपत्ति का उपयोग अनुभव जैसे अजाक्स का उत्पादन करने के लिए भी किया जा सकता है, विशेष रूप से फाइल अपलोड जैसे मामलों में, जिस स्थिति में फाइल जमा करने के लिए फॉर्म जमा करना अनिवार्य हो जाता है।
Iframe को 0 की चौड़ाई और ऊँचाई पर सेट किया जा सकता है, और फ़ॉर्म को iframe पर निर्धारित लक्ष्य के साथ सबमिट किया जा सकता है, और फ़ॉर्म सबमिट करने से पहले खोला गया एक लोडिंग संवाद। इसलिए, यह एक अजाक्स नियंत्रण को नियंत्रित करता है क्योंकि नियंत्रण अभी भी इनपुट फॉर्म jsp पर बना हुआ है, जिसमें लोडिंग संवाद खुला है।
उदाहरण के
<script>
$( "#uploadDialog" ).dialog({ autoOpen: false, modal: true, closeOnEscape: false,
open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } });
function startUpload()
{
$("#uploadDialog").dialog("open");
}
function stopUpload()
{
$("#uploadDialog").dialog("close");
}
</script>
<div id="uploadDialog" title="Please Wait!!!">
<center>
<img src="/imagePath/loading.gif" width="100" height="100"/>
<br/>
Loading Details...
</center>
</div>
<FORM ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()">
<!-- input file elements here-->
</FORM>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()">
</iframe>
यह फ़ंक्शन अस्थायी रूप बनाता है, फिर jQuery का उपयोग करके डेटा भेजें:
function postToIframe(data,url,target){
$('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
$.each(data,function(n,v){
$('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
});
$('#postToIframe').submit().remove();
}
लक्ष्य iFrame का 'नाम' attr है, और डेटा एक JS ऑब्जेक्ट है:
data={last_name:'Smith',first_name:'John'}
यदि आप iframe में जानकारी बदलना चाहते हैं तो उस iframe से फ़ॉर्म सबमिट करें, यह करें
...
var el = document.getElementById('targetFrame');
var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below
if (frame_win) {
doc = (window.contentDocument || window.document);
}
if (doc) {
doc.forms[0].someInputName.value = someValue;
...
doc.forms[0].submit();
}
...
आम तौर पर, आप केवल ऐसा कर सकते हैं यदि iframe में पृष्ठ उसी मूल से है, लेकिन आप उसी मूल नीति को अस्वीकृत करने और किसी भी पृष्ठ पर परीक्षण करने के लिए Chrome को डीबग मोड में प्रारंभ कर सकते हैं।
function getIframeWindow(iframe_object) {
var doc;
if (iframe_object.contentWindow) {
return iframe_object.contentWindow;
}
if (iframe_object.window) {
return iframe_object.window;
}
if (!doc && iframe_object.contentDocument) {
doc = iframe_object.contentDocument;
}
if (!doc && iframe_object.document) {
doc = iframe_object.document;
}
if (doc && doc.defaultView) {
return doc.defaultView;
}
if (doc && doc.parentWindow) {
return doc.parentWindow;
}
return undefined;
}