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?

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?

• javascript
• jquery
• html
• iframe

Share Improve this question Follow edited Aug 18, 2017 at 0:13 Kukic Vladimir 1,01044 gold badges1515 silver badges2323 bronze badges asked Sep 1, 2015 at 9:57 user123456789user123456789 2,00477 gold badges5151 silver badges114114 bronze badges 8

• 1 possible duplicate of pass a javascript variable from an iframe to the parent frame – Mosh Feu Commented Sep 1, 2015 at 10:04
• @MoshFeu how do I pass a variable from the iframe when the upload button is clicked? – user123456789 Commented Sep 1, 2015 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 Commented Sep 1, 2015 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 Commented Sep 1, 2015 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 manyclick events as much as you want (I didn't checked the limit ;)) – Mosh Feu Commented Sep 1, 2015 at 10:20

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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!');
    }
};