jQuery how to close dialog from iframe within dialog?

Question

If I open a dialog like so:

$('<iframe id="externalSite" class="externalSite" src="http://www.example.com" />').dialog({
        autoOpen: true,
        width: 800,
        height: 500,
        modal: true,
        resizable: true
    })

How can I close the dialog from withing the iframe?

Answer 1

Have you tried this?:

$(window.parent).dialog('close');

I have never used the jQuery UI dialog, so I'm not sure that will actually work. It seems to me that you would need to maintain a reference to the dialog you created so that you can use it to close the dialog.

Note, you could also look for elements in the parent's DOM by:

$('#someParentDOMElement' , window.parent);

Of course, all of this is assuming that the site you load within the iframe is on the same domain as the parent document. If not, then the document in your iframe will not have access to the parent DOM at all.

Answer 2

OK so I put the iframe on the page with display set to none. I open it like this:

$('#externalSite').dialog({ ... });

on the main parent window I have a function like this:

function closeIframe()
{
    $('#externalSite').dialog('close');
    return false;
}

From within the iframe I call:

window.parent.closeIframe();

Answer 3

Similar question here:

http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe

it might help or point you in the right direction.

Answer 4

Simply calling the following worked for me:

window.parent.$('#externalSite').dialog('close');