How do you make an iframe run a Javascript function on the main page when the iframe loads?

Question

I have this HTML:

<script type="text/javascript">
                        function uploadDone(response) {
                                alert(response);
                            }
                            function init() {
                                        document.getElementById('file_upload_form').onsubmit=function() {
                                            document.getElementById('file_upload_form').target = 'upload_target'; //'upload_target' is the name of the iframe
                                            document.getElementById("upload_target").onload = uploadDone(response);
                                        }
                                    }
                        </script>
                        <form method="get" id="file_upload_form" enctype="multipart/form-data" action="../includes/parsecsv.ajax.php" target="upload_target">
                            <label class="uploadClick">
                                <button class="normal">Click to Upload Sign Ups CSV</button>
                                <input type="file" id="uploadSignups file" name="file">
                            </label>
                            <span class="uploadDrag"><span>or</span>Drag Your Sign Ups CSV Here</span>
                            <button type="submit" name="action">hello</button>
                            <iframe id="upload_target" name="upload_target" src="" style="width:0px; height:0px; border:none;"></iframe>
                        </form>

It is supposed to, when you click the submit button, upload the selected file in the file input ajaxically through an <iframe>. I seem to have been able to get it to do the uploading, but it does not seem to run uploadDone() when the uploading is complete? Any ideas what is wrong with it?

Form contains enctype=multipart/form-data, but does not contain method=post. Submitting normally with method=GET and no enctype instead. - and when is your uploadDone() func is triggering — manny, Nov 26 '11 at 05:34

score 0 · Answer 1 · answered Nov 26 '11 at 05:28

I guess you would just add an event to the iFrame's window element:

document.getElementById("upload_target").contentWindow.onload = function(response) { uploadDone(response) };

Also, notice I'm wrapping the uploadDone inside a function; otherwise, it would just call it and set the event as whatever it returns.

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

Use the parent property of the IFrame, How to access parent Iframe from javascript

edited May 23 '17 at 11:55

Community

1
1

answered Nov 26 '11 at 05:31

Bert

80,741
17
199
164

score 0 · Answer 3 · edited Nov 26 '11 at 07:19

0

Here, you need to create a JSP file which will have the response and write some script in JSP to access the uploadDone method, which is already loaded in document.

The script in JSP can be something like:

 parent.document.uploadDone(response);

edited Nov 26 '11 at 07:19

Jonathan Leffler

730,956
141
904
1,278

answered Nov 26 '11 at 07:15

Mickey

53
7

2

Please do not use SMS-speak ('Here, u need') in SO; spell words out in full. – Jonathan Leffler Nov 26 '11 at 07:18

How do you make an iframe run a Javascript function on the main page when the iframe loads?

3 Answers3