发布到 iframe 目标：无法从 iframe 获得响应答案

【问题标题】：Post to iframe target: cannot get response from iframe发布到 iframe 目标：无法从 iframe 获得响应
【发布时间】：2013-07-15 02:09:40
【问题描述】：

我有一个书签。当它被点击时（在任何页面上）：

它会插入一个带有来自 mypage.com 的 src 的脚本元素。此 src 已下载。
src 然后：
- 插入 iframe (DOM)
- 插入表单 (DOM)。表单以 iframe 为目标。
- 向表单添加数据并将其提交到 mypage.com
mypage.com 发回响应：<div id = "msg">Message back</div>
这个响应 div 被插入到 iframe 中。（在 Chrome 元素标签中验证）
现在我想提醒返回的消息“回消息”。它不工作。

在创建 iframe 时，我设置了它的 onload 事件：

var i = document.createElement('iframe');
i.setAttribute('id', 'frame-id');
i.setAttribute('onload', 'iframeFormSubmitted();');

然后我就有了函数：

function iframeFormSubmitted(){
    // in try-catch, alerting error
    var iframe = document.getElementById("frame-id");
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    var msg = iframeDocument.getElementById("msg").innerHTML;
    alert(msg);

}

这最终被调用了两次（我认为是第一次，因为我还将表单写入 iframe）。错误是：

cannot read property innerHTMl of null
cannot call method getElementById of undefined

编辑：contentDocument 未定义。我认为这是一个跨域的事情：How can an iFrame that has content, have an undefined contentDocument object?

【问题讨论】：

标签： javascript forms iframe

【解决方案1】：

在您的父文档（iframe 所在的文档）中创建一个function，例如，您的父文档中的函数done，如下所示

function done(message)
{
    // do whatever you want to do with message
    alert(message);
}

从服务器 (mypage.com) 将以下代码作为响应发送到 iframe

// Call the "done" function from the iframe (the last line on the server)
echo "<script type='text/javascript'>parent.done('This is my message')</script>";

它会起作用的，我已经在我的一个项目中应用了这个，并且完美地工作。

下面是我的工作项目中的一些HTML 片段

<form action="someAction" method="post" id="imageform" name="imageform" target="img_submit" enctype="multipart/form-data">
    <input style="display:none" type="file" name="imgfile" id="imgfile" />
    <input style="display:none" type="submit" name="subimg" value="Submit" />
</form>

这是隐藏的iframe

 <iframe style="display:none" id="img_submit" name="img_submit"></iframe>`

这是我在parent 文档中的done 函数（与iframe 所在的文件相同）

function done(lnk)
{
    // this is being used for afile upload (ajax simulation/fake)
    loading('hide');
    document.imageform.reset();
}

【讨论】：