I have written a tool for taking notes, grabbing images from web pages. It loads itself as a iFrame within the current window by using a javascript bookmark:

javascript:(function(){   _my_script=document.createElement('SCRIPT');   _my_script.type='text/javascript';   _my_script.src='/js/bookmarklet.js?rand='+(Math.random());   document.getElementsByTagName('head')[0].appendChild(_my_script); })();

I want to be able to close the tool by removing the iFrame from the parent window, when the user clicks on a close button.

What is the easiest way of doing this - Is it possible to close an iFrame within itself?

I've tried using cross-domain message posting. I have cross-domain posting working from the parent window to the child iFrame, but doesn't work from the iFrame to the parent window.

The code I have so far (which presumably contains the problem) is as follows.

In the parent window through the dynamically loaded Javascript:

function    addiFrame(domain){
    var iframe_url = "http://" + domain + "/bookmarklet";

    var div = document.createElement("div");
    div.id = bookmarkletID;

    var str = "";

    iframe_url += "?description=" + encodeURIComponent(document.title);
    iframe_url += "&URL=" + encodeURIComponent(document.URL);

    str += "<div>";
    str += "<iframe frameborder='0' class='toolPanelPopup dragTarget' style='z-index: 1000'  name='bookmarklet_iframe' id='bookmarklet_iframe' src='" + iframe_url + "' width='550px' height='255px' style='textalign:right; backgroundColor: white;' />";

    str += "</div>";

    div.innerHTML = str;

    document.body.insertBefore(div, document.body.firstChild);
}


function jQueryLoadedCallback(){

    jQueryAlias = jQuery.noConflict();
    jQueryAlias('#' + bookmarkletID).bind('basereality.removeFrame', removeFrame);
}

function removeFrame(){
    alert("Calling remove frame");
    $("#" + bookmarkletID).remove();
}

In the iFrame, the button to close the iFrame calls:

function removeFrame(){
    var params = {};
    params.message = 'basereality.removeFrame';
    parent.postMessage(params, "*");
}

The removeFrame call in the iFrame doesn't result in the removeFrame being called in the parent window.

So how should I actually remove the iFrame.

I have written a tool for taking notes, grabbing images from web pages. It loads itself as a iFrame within the current window by using a javascript bookmark:

javascript:(function(){   _my_script=document.createElement('SCRIPT');   _my_script.type='text/javascript';   _my_script.src='http://basereality.test/js/bookmarklet.js?rand='+(Math.random());   document.getElementsByTagName('head')[0].appendChild(_my_script); })();

I want to be able to close the tool by removing the iFrame from the parent window, when the user clicks on a close button.

What is the easiest way of doing this - Is it possible to close an iFrame within itself?

I've tried using cross-domain message posting. I have cross-domain posting working from the parent window to the child iFrame, but doesn't work from the iFrame to the parent window.

The code I have so far (which presumably contains the problem) is as follows.

In the parent window through the dynamically loaded Javascript:

function    addiFrame(domain){
    var iframe_url = "http://" + domain + "/bookmarklet";

    var div = document.createElement("div");
    div.id = bookmarkletID;

    var str = "";

    iframe_url += "?description=" + encodeURIComponent(document.title);
    iframe_url += "&URL=" + encodeURIComponent(document.URL);

    str += "<div>";
    str += "<iframe frameborder='0' class='toolPanelPopup dragTarget' style='z-index: 1000'  name='bookmarklet_iframe' id='bookmarklet_iframe' src='" + iframe_url + "' width='550px' height='255px' style='textalign:right; backgroundColor: white;' />";

    str += "</div>";

    div.innerHTML = str;

    document.body.insertBefore(div, document.body.firstChild);
}


function jQueryLoadedCallback(){

    jQueryAlias = jQuery.noConflict();
    jQueryAlias('#' + bookmarkletID).bind('basereality.removeFrame', removeFrame);
}

function removeFrame(){
    alert("Calling remove frame");
    $("#" + bookmarkletID).remove();
}

In the iFrame, the button to close the iFrame calls:

function removeFrame(){
    var params = {};
    params.message = 'basereality.removeFrame';
    parent.postMessage(params, "*");
}

The removeFrame call in the iFrame doesn't result in the removeFrame being called in the parent window.

So how should I actually remove the iFrame.

• javascript
• iframe
• cross-domain

• 1 Could you not put the button on the outside of the iframe? – Xymostech Commented Mar 23, 2013 at 1:17
• I could but I'd prefer to have it inside the iFrame, so that it is positioned alongside the other buttons. – Danack Commented Mar 23, 2013 at 1:20
• I have a project where I'm doing something similar to Xymostech's idea where I put the button on the outside of the iframe and then manipulate the css of the button to make it appear on the iframe. It was the fastest solution for me. – markashworth Commented Jun 8, 2013 at 10:11

1 Answer 1

postMessage is probably what you're looking for. Mozilla has documented this and it has fairly decent cross browser support:

https://developer.mozilla/en-US/docs/DOM/window.postMessage

I also wrote a library around this concept, it may need a little debugging but it is available on github: https://github./tsharp/OF.Core.js/blob/master/js/of/window.messaging.js

From here you'll need an event listener on the parent window to handle all ining requests ... which will remove the iframe from the parent context. Here is an example of registering the message received event.

function registerWindowHandler() {
    if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', receiveMessage, false);
    } else {
    // Support for ie8
    window.attachEvent('onmessage', receiveMessage);
    }
}