How do I remove an iframe from within itself (that has been dynamically created and loaded with src)

Question

I want to be able to remove an iframe from within itself. The iframe is created dynamically and the content is loaded with 'src'.

I create my iframe like this:

    var i = document.createElement('iframe');
    i.id = 'proxy_frame';
    i.name = 'proxy_frame';
    i.setAttribute('src', url);
    document.body.appendChild(i);

Then from within 'url' I want to be able to remove/close the iframe.

Before loading the data into the iframe with src I used document.write:

    window.frames['proxy_frame'].document.write(html);

and then I was abloe to remove the iframe with:

    window.parent.document.getElementById("proxy_frame").parentNode.removeChild(window.parent.document.getElementById("proxy_frame"));

But this does not work with 'src'.

Note: This is for a bookmarklet so I don't want to use jQuery or another library.

Answer 1

For local domain iframes you don't need to rely on ids.

window.parent.document.body.removeChild(window.frameElement);

window.frameElement has reasonable support https://developer.mozilla.org/en-US/docs/Web/API/Window/frameElement

Answer 2

Define a method in your parent page

function removeElement() {
  var d = document.getElementById('body'); // or any other parent element
  var proxy_frame = document.getElementById('proxy_frame');
  d.removeChild(proxy_frame);
}

To call this method from your iframe simply use this

<a href="#" onclick="top.window.removeElement();">Remove me</a>

Answer 3

You can't access the parent page as long as it's in a different domain.

Set up a page in your site that can be used to remove the iframe, then in the iframe you just go to that page.