如何将值从 iframe 传递给父级？答案

【问题标题】：how to pass a value from iframe to the parent?如何将值从 iframe 传递给父级？
【发布时间】：2015-09-01 09:57:17
【问题描述】：

我正在使用 iframe 上传图片，因此 iframe 包含一个上传按钮。然后它会获取保存到数据库所需的图像 ID。在父页面上，我有一个保存按钮。但我希望隐藏这个保存按钮，直到点击 iframe 上的上传按钮。如何将 iframe 中的值传递给父级？所以我需要一些东西让我知道上传按钮已被点击。然后将该值传递给父级，然后显示保存按钮。内嵌框架：

<tr>
  <td>
    <asp:LinkButton runat="server" ID="btnUpload" CssClass="btnUpload2" OnClick="btnUpload_Click" Text="Upload"  />
  </td>
</tr>
<tr>
  <td>
    <asp:FileUpload runat="server" ID="fuUpload" />                
  </td>               
</tr>
</table>
</div>
<input type="hidden" id="FileNameHidden" style="display:none" runat="server" clientidmode="Static" />

编辑

所以我在 iframe 中的上传功能中添加了OnClientClick="IsPressed()"，并添加了这段 javascript 代码：

function IsPressed() {
  var pressed = "yes";
  window.parent.uploadPressed(pressed);
}

然后在父级中我添加了这个函数：

function uploadPressed(pressed) {
  $("#btnUpdateImage").show();
}

并将按钮上的可见设置为false：

<asp:LinkButton ID="btnUpdateImage" Visible="false" onclick="btnUpdateImage_Click" OnClientClick="CloseImage();return GetDbriefFilename();" CssClass="btnSaveSmall" runat="server" ></asp:LinkButton>

但是当我单击 iframe 上的上传按钮时，父级上的保存按钮没有显示。我测试过，值正在从 iframe 传递到父级，但为什么不显示保存按钮？

【问题讨论】：

pass a javascript variable from an iframe to the parent frame的可能重复
@MoshFeu 如何在单击上传按钮时从 iframe 传递变量？
在输入文件上使用change 事件。比用你的变量调用父函数，就像在链接的问题中一样。
@MoshFeu 我已经在为按钮 OnClick="btnUpload_Click" 使用 onClick 事件，如何添加新的点击事件？
A. OnClick="btnUpload_Click" 是服务器属性，因此您的脚本中没有名为 btnUpload_Click 的 JavaScript 函数。 B. 使用OnClientClick 调用客户端函数，而不是在该函数中，将变量传递给父级。附言阅读click事件，这样你就会明白你可以随心所欲地附加许多click事件（我没有检查限制；））

标签： javascript jquery html iframe

【解决方案1】：

你必须使用cross-document messaging。

例如在顶部窗口中：

myIframe.contentWindow.postMessage('hello', '*');

在 iframe 中：

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

【讨论】：

只有当文档来自不同的来源时才会这样。