17

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?

JD Isaacks
  • 56,088
  • 93
  • 276
  • 422
  • I'd say the code inside doesn't have permissions for that, esp. if it's an external site. – Piskvor left the building Aug 26 '10 at 14:15
  • @Piskor, its the same site. I can call a function on the parent window like `window.parent.function()` but not sure how I would target this dialog to close it. – JD Isaacks Aug 26 '10 at 14:21
  • 1
    Worth noting that you might need to set the [document.domain](https://developer.mozilla.org/en-US/docs/DOM/document.domain) property on the contained iFrame. This lets you share frame contexts between different subdomains on the same top level domain. – Patrick M Feb 01 '13 at 15:59
  • I just ran into this problem, and shook my head because two days ago my CLOSE button worked fine to close the parent dialog. "What's going on?" I thought. "It's on the same website!" Ah, but no: If I open my app from "mydomain.com", it calles the iframe src="www.mydomain.com". Notice the "www". It's not the same domain! – TARKUS Sep 30 '13 at 18:51
  • Similar question here: [http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) it might help or point you in the right direction. – Randall Kwiatkowski Aug 26 '10 at 15:24

3 Answers3

28

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();
JD Isaacks
  • 56,088
  • 93
  • 276
  • 422
  • 1
    Yeah, but the problem will happen when you open "http://mywebsite.com/myapp/" and the iframe source uses "www" (or vice versa, swapping the "www"). I strongly suspect the OP is doing something like that. – TARKUS Sep 30 '13 at 18:53
  • I am the OP, and this was 3 years ago :) – JD Isaacks Oct 01 '13 at 15:53
  • 2
    The other day I Googled a problem. I came to a StackOverflow page, and someone was saying, "I used Gregory Lewis's code, and it worked." I was going to leave a funny comment about another guy named Gregory Lewis, until I scrolled down the page, and saw he was talking about an answer I gave. I had the problem twice, and didn't even remember that I solved the problem last year that I was looking for an answer to yesterday. – TARKUS Oct 01 '13 at 17:56
  • Why is this answer not at the top? Btw this was exactly what I needed. – John Jun 15 '16 at 20:14
7

Simply calling the following worked for me:

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

Kraftwurm
  • 71
  • 1
  • Actually in my case, I was using Wijmo Dialog (built on jQuery UI) and so I had a dialog/popup loading external content (HTML) and needed a way to close the dialog/popup by pressing a "cancel" button inside that external HTML.. so the following worked nicely for me: window.parent.$('#eventdialog').wijdialog('close'); so #eventdialog of course was my selector. Within the close event of the wijmo dialog, you could then add any clean-up code too. Hope this helps – Dav.id Aug 14 '12 at 07:30
0

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.

James Sumners
  • 14,485
  • 10
  • 59
  • 77
  • 1
    I tried `$(window.parent).dialog('close');` it did not work but I took your maintain a reference idea and used it in my answer. Thanks. – JD Isaacks Aug 26 '10 at 14:31
  • 1
    `$(window.parent).dialog('close')` doesn't work because `window.parent` refers to the parent JavaScript Window object, not the jQuery UI dialog element. – cdmckay Oct 08 '12 at 20:08