Geek Answers Handbook

Get data from the iframe after the form message has completed uploading the file to the target for

this type has two questions that are difficult to explain, but I will give it to him.

I have a form that uses the target attribute to target the iframe when the form is sent to posts that are sent to a PHP script. This part works fine, but I need to do something based on several results that the PHP script will put in the iframe.

What I'm going to do is when the PHP script finished echoing it from some hidden input fields that contain various elements, such as the status of the message, whether it was completed and what the end result is if it was successfully published.

However, if I did this, it would put it in an iframe, so the main web page will not be able to access the hidden input fields.

How would the main web page be able to access these hidden input fields so that the main web page can perform some kind of action, Ie make a div on the web page, show a specific error message or something else.

Another thing is when I know how I can get data from a hidden input field, how do I know when I can go and get values. I thought that when a form is submitted via javascript code document.forms ["myform"]. Submit (), I could do a while loop and check if it is established that another status of the hidden input field is completed, and when it says Finally, I can get the values ​​from the hidden input field.

I'm not sure the way I suggested is the right way or doing what I want to achieve, or if there is a better way to do this, but any help would be greatly appreciated.

thanks

UPDATE

I tried what @lanzz suggested, but it didn't seem to work. Below I have tried.

$("iframe#image_upload_frame").on('load', function() { var iframeBody = this.contentDocument.body; var data = $(iframeBody).find("#imageDirectory"); alert("data: " + data); });

The following shows how the iframe is defined.

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

and I repeat the hidden input field in the php script that is inside the iframe.

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

The echo definitely works as when I see the iframe source view, I can see the hidden input, however the warning dialog never appears as if something is not working. Error messages are not reported by the Google Chrome Chrome console.

+6
source share
5 answers

If I understand correctly, you need the value from the iframe in the parent window as soon as the value is loaded into the iframe. I would add javascript to the iframe, calling the parent and executing the function.

In the main frame:

 function incomingValue(val) { alert(val) }

and somewhere in the generated iframe:

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

This should work, assuming that both frame sources use the same domain.

+5
source

Since you are working in the same domain, your Javascript on the main page will not have problems accessing the <iframe> content (the example uses jQuery, you can rewrite it to any libraries that you plan to use):

 $('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'); });
+1
source

Some time ago I wrote a code snippet to load an image using some javascript and two frames. The most important thing for me was the preview of the drawing. Perhaps this will help you:

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>

both frames are hidden. There is no source in the target frame (or blank page if you want).

uploadform.php contains the form:

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

and then some javascript: First of all, something to trigger a file browser when the user clicks fake

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

And then the part to actually load the image called onchange () in the input element:

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

In dosomething.php, I perform actions on the loaded drawing (renaming, resizing, etc.). And it contains some javascript lines:

 $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

if you create in javascripty a function called smurf (a, b, c), you can pass everything you want from php-script. One of the most important things for me was that now I can pass the name of the downloaded image to javascript and use it to change image.src for preview. Hope you can use something.

0
source

Your original iframe page should have a javascript call function instead of a hidden field. The function will open the opening window (main page), and then execute any functionality. As a blue print, pay attention to the following:

 //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 } ?>
0
source

More articles:


All Articles