Stan
Stan

Reputation: 38255

How to close an iframe within iframe itself

How do I use javascript or jQuery to close an iframe within iframe itself? I've tried <a href="javascript:self.close()"> but it didn't work.

Upvotes: 63

Views: 141375

Answers (6)

keiohtani
keiohtani

Reputation: 71

Unfortunately the above solutions don't work if the domains of parent/child applications are different. Instead, you can use window.postMessage API if you own both applications.

Here is a simple example in React.

In Main Application

const [open, setOpen] = React.useState(false);
useEffect(() => {
  window.addEventListener("message", (event) => { 
    if (event.data === "closeWindow") {
      setOpen(false);
    }
  });
}, []);

In iframe Application

<Button
  onClick={() => {
    window.parent.postMessage("closeWindow", "*");
  }}
>
  close
</Button>

In this example, I demonstrated child-to-parent communication, but the API supports both directions.

Upvotes: 0

user3370889
user3370889

Reputation: 171

function closeWin()   // Tested Code
{
var someIframe = window.parent.document.getElementById('iframe_callback');
someIframe.parentNode.removeChild(someIframe));
}


<input class="question" name="Close" type="button" value="Close" onClick="closeWin()" tabindex="10" /> 

Upvotes: 17

Rafael Ara&#250;jo
Rafael Ara&#250;jo

Reputation: 3854

None of this solution worked for me since I'm in a cross-domain scenario creating a bookmarklet like Pinterest's Pin It.

I've found a bookmarklet template on GitHub https://gist.github.com/kn0ll/1020251 that solved the problem of closing the Iframe sending the command from within it.

Since I can't access any element from parent window within the IFrame, this communication can only be made posting events between the two windows using window.postMessage

All these steps are on the GitHub link:

1- You have to inject a JS file on the parent page.

2- In this file injected on the parent, add a window event listner

    window.addEventListener('message', function(e) {
       var someIframe = window.parent.document.getElementById('iframeid');
       someIframe.parentNode.removeChild(window.parent.document.getElementById('iframeid'));
    });

This listener will handle the close and any other event you wish

3- Inside the Iframe page you send the close command via postMessage:

   $(this).trigger('post-message', [{
                    event: 'unload-bookmarklet'
                }]);

Follow the template on https://gist.github.com/kn0ll/1020251 and you'll be fine!

Hope it helps,

Upvotes: 7

zach
zach

Reputation: 11

its kind of hacky but it works well-ish

 function close_frame(){
    if(!window.should_close){
        window.should_close=1;
    }else if(window.should_close==1){
        location.reload();
        //or iframe hide or whatever
    }
 }

 <iframe src="iframe_index.php" onload="close_frame()"></iframe>

then inside the frame

$('#close_modal_main').click(function(){
        window.location = 'iframe_index.php?close=1';
});

and if you want to get fancy through a

if(isset($_GET['close'])){
  die;
}

at the top of your frame page to make that reload unnoticeable

so basically the first time the frame loads it doesnt hide itself but the next time it loads itll call the onload function and the parent will have a the window var causing the frame to close

Upvotes: 1

Isitea
Isitea

Reputation: 751

Use this to remove iframe from parent within iframe itself

frameElement.parentNode.removeChild(frameElement)

It works with same origin only(not allowed with cross origin)

Upvotes: 9

citizen conn
citizen conn

Reputation: 15390

"Closing" the current iFrame is not possible but you can tell the parent to manipulate the dom and make it invisible.

In IFrame:

parent.closeIFrame();

In parent:

function closeIFrame(){
     $('#youriframeid').remove();
}

Upvotes: 91

Related Questions