Close iframe within iframe (parent:php, child:aspx) when a button is clicked

Question

I have been trying to figure this out for a while and I see many similar questions but not exactly what I'm looking for.

I have a .php page as a parent page, and it has an iFrame which displays a .aspx page. What I want to do is: when user clicks a button inside the aspx page, close the modal iframe and go back to the php page.

parent.php
+-------------------------------------------+
|                                           |
|                                           |
|       "survey"                            |
|       CloseSurvey()                       |
|       +--------------------------+        |
|       |                          |        |
|       |                          |        |
|       |    child.aspx            |        |
|       |    +---------------+     |        |
|       |    |               |     |        |
|       |    |    btnClose   |     |        |
|       |    |               |     |        |
|       |    |               |     |        |
|       |    |               |     |        |
|       |    +---------------+     |        |
|       |                          |        |
|       |                          |        |
|       +--------------------------+        |
|                                           |
+-------------------------------------------+

void btnClose_Click(object sender, EventArgs e)
{
    //Close iframe
}

I have tried

ClientScript.RegisterStartupScript(typeof(Page), "CLOSEWINDOW", "parent.CloseSurvey()");

and it didn't do anything. No error, and won't close.

I've been trying to figure out how I can call the method in parent, but I still can't figure it out yet.

How can I close the modal iframe popup from child.aspx??

score 1 · Accepted Answer · edited May 23 '17 at 12:29

if your php and aspx pages are on the same domain, you can do this:

on your PHP page have a public method named closeIframe

on click of the close button from the .aspx page, invoke the closeIframe method from the parent using window.parent.closeIframe

the closeIframe method in the PHP page can either hide or remove the iframe depending on what your requirements are.

if your php and aspx pages are on different domains, you can implement similar functionality, but you will need to use window message events.

also, if the close button does not need to invoke any server-side code, I would recommend that you make the close button with an <a> tag.

edit:

since the aspx page is on a subdomain, then the solution would involve window message events.

script to invoke from aspx on close button click:

window.parent.postMessage("closeframe", "*");

code on php page to listen for messages:

function listenMessage(event) {
    switch(event){
        case "closeframe":
            //logic to close the iframe
            break;
    }
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

the domain is the same but the subdomain is not. (e.g. the parent is `parent.com` and the child is `child.parent.com`). I'll try window message events. Thank you! — kabichan, Jan 15 '14 at 00:40
ok, then the window message events should work perfectly for you. — Fisch, Jan 15 '14 at 00:44

score 0 · Answer 2 · answered Jan 15 '14 at 00:03

0

You don't really close an <iframe>. You either change the Element.src or remove the Element, using either Element.innerHTML = '' or Element.removeChild(otherNode). Use frames[number] to get the iframe from within your .aspx file using JavaScript.

answered Jan 15 '14 at 00:03

StackSlave

10,198
2
15
30

Close iframe within iframe (parent:php, child:aspx) when a button is clicked

2 Answers2