当 iframe 加载时，如何使 iframe 在主页上运行 Javascript 函数？答案

【问题标题】：How do you make an iframe run a Javascript function on the main page when the iframe loads?当 iframe 加载时，如何使 iframe 在主页上运行 Javascript 函数？
【发布时间】：2011-11-26 05:23:41
【问题描述】：

我有这个 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>

应该是，当您单击提交按钮时，通过<iframe> ajaxically 上传文件输入中选择的文件。我似乎已经能够让它进行上传，但是上传完成后它似乎没有运行uploadDone()？有什么想法有什么问题吗？

【问题讨论】：

Form 包含 enctype=multipart/form-data，但不包含 method=post。使用 method=GET 正常提交，而不使用 enctype。 - 你的 uploadDone() 函数何时触发

标签： javascript jquery html ajax ajax-upload

【解决方案1】：

我猜你只会在 iFrame 的窗口元素中添加一个事件：

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

另外，请注意我将uploadDone 包装在一个函数中；否则，它只会调用它并将事件设置为它返回的任何内容。

【讨论】：

【解决方案2】：

使用 IFrame 的父属性，How to access parent Iframe from javascript

【讨论】：

【解决方案3】：

在这里，您需要创建一个 JSP 文件，该文件将包含响应和在 JSP 中编写一些脚本来访问 uploadDone 方法，该方法已加载到文档中。

JSP 中的脚本可以是这样的：

 parent.document.uploadDone(response);

【讨论】：

请不要在 SO 中使用 SMS-speak ('Here, u need')；完整地拼出单词。