फॉर्म पोस्ट के बाद एक आईफ्रेम से डेटा प्राप्त करें

Question

के लिए लक्ष्य पर एक फ़ाइल अपलोड करने के बाद पूरा हो गया है इस तरह के 2 प्रश्नों को समझाने के लिए कठिन है लेकिन मैं इसे जाने दूंगा।

मेरे पास एक ऐसा फॉर्म है जो एक आईफ्रेम को लक्षित करने के लिए लक्ष्य विशेषता का उपयोग करता है जब फॉर्म पोस्ट किया जाता है जो PHP स्क्रिप्ट पर पोस्ट करता है। यह हिस्सा ठीक काम कर रहा है लेकिन मुझे कुछ परिणामों के आधार पर कुछ करने की ज़रूरत है जो php स्क्रिप्ट आईफ्रेम में रखेगी।

मैं क्या करने की सोच रहा हूं, जब PHP स्क्रिप्ट पोस्ट करना समाप्त हो गया है, तो यह कुछ छिपे हुए इनपुट फ़ील्ड को गूंजता है जिसमें पोस्ट की स्थिति जैसे विभिन्न तत्व होते हैं, चाहे वह सफल हो और अंतिम परिणाम क्या था सफलतापूर्वक पोस्ट किया गया।

हालांकि, अगर मैंने ऐसा किया तो यह इसे आईफ्रेम में डाल देगा ताकि मुख्य वेब पेज छुपा इनपुट फ़ील्ड तक पहुंच सके।

मुख्य वेब पेज इन छिपे हुए इनपुट फ़ील्ड तक कैसे पहुंच पाएगा ताकि मुख्य वेब पेज कुछ क्रियाएं कर सके, यानी। वेब पेज के भीतर एक div एक विशिष्ट त्रुटि संदेश या जो भी दिखाते हैं।

दूसरी बात यह है कि, एक बार मुझे पता है कि मैं छुपा इनपुट फ़ील्ड से डेटा कैसे प्राप्त कर सकता हूं, मुझे कैसे पता चलेगा कि मैं कब जा सकता हूं और मूल्य प्राप्त कर सकता हूं। मैं सोच रहा था कि जब फॉर्म जावास्क्रिप्ट दस्तावेज़ के माध्यम से पोस्ट किया जाता है। ["Myform"]। सबमिट करें() कोड मैं फिर थोड़ी देर लूप कर सकता हूं और यह देखने के लिए जांच सकता हूं कि एक और छिपी हुई इनपुट फ़ील्ड स्थिति पूर्ण होने के लिए सेट है और एक बार यह कहने के बाद पूरा मैं छुपा इनपुट फ़ील्ड से मूल्य प्राप्त कर सकता हूं।

मुझे यकीन नहीं है कि जिस तरह से मैंने सुझाव दिया है वह सही तरीका है या जो मैं हासिल करना चाहता हूं वह कर रहा हूं या यदि ऐसा करने का एक बेहतर तरीका है लेकिन किसी भी मदद की सराहना की जाएगी।

धन्यवाद

अद्यतन

क्या सुझाव दिया @lanzz लेकिन यह काम किया है प्रतीत नहीं होता है मैं कोशिश की है। नीचे मैंने कोशिश की है।

$("iframe#image_upload_frame").on('load', function() 
{ 
    var iframeBody = this.contentDocument.body; 


    var data = $(iframeBody).find("#imageDirectory"); 
    alert("data: " + data); 
}); 

नीचे कैसे iframe

<iframe id="image_upload_frame" name="image_upload_frame"></iframe> 

परिभाषित किया गया है और मैं PHP स्क्रिप्ट iframe के भीतर है कि में एक छिपा इनपुट क्षेत्र बाहर गूंज रहा है।

echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />'; 

गूंज निश्चित रूप से जब मैं iframe स्रोत मैं छिपे हुए इनपुट तथापि देख सकते हैं देखने को देखने के रूप में काम कर रहा है, चेतावनी संवाद रूप में अगर कुछ काम नहीं कर रहा कभी नहीं दिखाया गया है। Google क्रोम देव कंसोल द्वारा या तो कोई त्रुटि रिपोर्ट नहीं की जा रही है।

Answer 1

अगर मैं कोर को समझता हूं ctly - आईफ्रेम में मान लोड होने के बाद, आपको मूल विंडो में आईफ़्रेम से एक मान की आवश्यकता होती है। मैं माता-पिता को कॉल करने और फ़ंक्शन निष्पादित करने वाले आईफ़्रेम पर जावास्क्रिप्ट जोड़ूंगा।

मुख्य फ्रेम में:

function incomingValue(val) { 
    alert(val) 
} 

और कहीं उत्पन्न iframe में:

<script type="text/javascript"> 
parent.incomingValue("Hello world"); 
</script> 

यह मानते हुए दोनों फ्रेम सूत्रों का डोमेन एक ही काम करना चाहिए।

Answer 2

आप एक आईफ्रेम और उसके माता-पिता के बीच क्रॉस दस्तावेज़ संचार के लिए postMessage का उपयोग कर सकते हैं।

देखें:

http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

http://javascript.info/tutorial/cross-window-messaging-with-postmessage

Answer 3

जब से तुम एक ही डोमेन पर चला रहे हैं, अपने मुख्य पृष्ठ के जावास्क्रिप्ट की सामग्री का उपयोग करने के लिए कोई परेशानी नहीं होगी (उदाहरण के jQuery का उपयोग करती, आप जो भी libs का उपयोग करने की योजना बना रहे हैं उसे फिर से लिख सकते हैं):

$('iframe#the-id-of-the-iframe').on('load', function() { 
    var iframeWin = this.contentWindow; 
    var iframeBody = this.contentDocument.body; 

    // access global JS vars defined in the iframe: 
    var someIframeVariable = iframeWin.globalIframeVariable; 

    // or, directly access elements in the iframe: 
    var someIframeElement = $(iframeBody).find('#element-id-inside-iframe'); 
}); 

Answer 4

कुछ समय पहले मैंने कुछ जावास्क्रिप्ट और दो आईफ्रेम का उपयोग करके एक तस्वीर अपलोड करने के लिए कोड का एक टुकड़ा लिखा था। मेरे लिए सबसे महत्वपूर्ण बात तस्वीर का पूर्वावलोकन करना था। शायद यह तुम्हारी मदद करेगा:

HTML:

<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div> 
<iframe src='uploadform.php' name'pic_frame'></iframe> 
<iframe src='#' name='target_frame'></iframe> 

दोनों iframes छिपे हुए हैं। लक्ष्य फ्रेम का कोई स्रोत नहीं है (या यदि आप चाहते हैं तो एक खाली पृष्ठ)।

<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''> 
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'> 
</form> 

और फिर कुछ जावास्क्रिप्ट: जब उपयोगकर्ता नकली

function select_pic(){ 
    b=window.frames['pic_frame']; 
    b.document.upload_form.realfoto.click(); 
    } 

और फिर करने के लिए एक हिस्सा क्लिक करता है यह मानते हुये को गति प्रदान करने के लिए सभी कुछ का पहले

uploadform.php एक रूप होता है वास्तव में इनपुट तत्व में ऑनचेंज() द्वारा ट्रिगर किया गया चित्र:

function foto_upload(o){ 
    var b=o; 
    o=getElementById(o); 
    if(o.contentDocument) {o = o.contentDocument;} 
    else if(o.contentWindow){o = o.contentWindow;} 
    else{return false;} 
    if(test_pic(o,b)){ //test if it is really a pic 
    getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value; 
    o.getElementById('doctype_nr').value=b; 
    o.fotoform.submit(); 
    } 
    else{ 
return false;} 
} 

dosomething.php में मैं अपलोड की गई तस्वीर (नाम बदलें, आकार बदलें) पर क्रियाएं करता हूं। और यह जावास्क्रिप्ट की कुछ लाइनें शामिल हैं:

$a = 'upload was succes'; 
$b = 'my_image_name'; 
$c = 'whatever you want to put here'; 
?> 
    <script type="text/javascript"> 
    window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script> 
    <?php 

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

Answer 5

आपके आईफ्रेम स्रोत पृष्ठ में छिपे हुए क्षेत्र की बजाय जावास्क्रिप्ट कॉल फ़ंक्शन होना चाहिए। फ़ंक्शन ओपनर विंडो (आपका मुख्य पृष्ठ) को कॉल करेगा और फिर यह आपकी इच्छित कार्यक्षमता करेगा। नीले रंग के प्रिंट के रूप में निम्न पर देखें:

//in iframe src.php 

<?php 
if ($something){ 
?> 
<script> 
function doSomethingWithOpenerWindow(){ 
opener.document.write('hi); 
} 
doSomethingWithOpenerWindow() 
</script> 
<?php 
} 
else{ 
?> 
<script> 
function doAnotherSomethingWithOpenerWindow(){ 
opener.document.write('hi); 
} 
doAnotherSomethingWithOpenerWindow() 
</script> 

<?php 
} 
?>