how to pass a value from iframe to the parent?

Question

I'm using an iframe to upload an image, so the iframe contains an upload button. It then gets the Image ID, which is needed to save to the database. On the parent page I then have a save button. But I want this save button hidden until the upload button on the iframe is clicked. How I can pass a value from the iframe to the parent? So I need something to let me know the upload button has been clicked. Then pass that value to the parent, and then show the save button. 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" />

EDIT

So I added OnClientClick="IsPressed()" to the upload function in the iframe and added this javascript code:

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

Then in the parent I added this function:

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

And set the visible to false on the button:

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

But when I click the uplaod button on the iframe, the save button on the parent isn't displaying. I tested and the value is being passed from the iframe to the parent but why isn't the save button displaying?

possible duplicate of [pass a javascript variable from an iframe to the parent frame](http://stackoverflow.com/questions/6271313/pass-a-javascript-variable-from-an-iframe-to-the-parent-frame) — Mosh Feu, Sep 01 '15 at 10:04
@MoshFeu how do I pass a variable from the iframe when the upload button is clicked? — user123456789, Sep 01 '15 at 10:08
Use `change` event on the input-file. Than call to parent function with your variable, just like in the linked question. — Mosh Feu, Sep 01 '15 at 10:12
@MoshFeu I am already using an onClick event for the button `OnClick="btnUpload_Click"` how do I add new click event? — user123456789, Sep 01 '15 at 10:15
A. `OnClick="btnUpload_Click"` is server attribute so there is no JavaScript function called `btnUpload_Click` in your script. B. Use `OnClientClick` to call a client function, than in this function, pass the variable to the parent. P.S. read about `click` event, so you will understand that you can attach many`click` events as much as you want (I didn't checked the limit ;)) — Mosh Feu, Sep 01 '15 at 10:20
`Visible="false"` not hide the button but not render it at all. See http://forums.asp.net/t/1412978.aspx?What+different+are+there+between+Visible+false+and+display+none+ — Mosh Feu, Sep 01 '15 at 11:41

score 3 · Answer 1 · answered Sep 01 '15 at 10:50

3

You have to use cross-document messaging.

For example in the top window:

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

and in the iframe:

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

answered Sep 01 '15 at 10:50

Anand Sudhanaboina

885
6
10

That's only true if the documents are on different origins. – Quentin Sep 01 '15 at 10:51

how to pass a value from iframe to the parent?

1 Answers1

Linked

Related