HTML/JavaScript: How to close iframe from parent page by id?

Question

I have a page with a button which creates iframes and appends them to a div:

function createIFRAME() {
    $.get("../../../GetIframeID", function(data){
        alert(data);

        ifrm = document.createElement("IFRAME");
        ifrm.setAttribute("id", data);
        ifrm.setAttribute("src", "chat.html");
        //ifrm.setAttribute("scrolling", "no");
        ifrm.setAttribute("frameborder", "0");
        ifrm.style.width = 304+"px";
        ifrm.style.height = 284+"px";

        document.getElementById("content").appendChild(ifrm);
    });
}

Using a servlet with a static attribute I assure the uniqueness of iframe's id.

Problem: Each created page (chat.html) contains a button for closing the page. I found the script for closing an iframe from its parent's page, but I couldn't figure out how to get the id of a specific iframe.

function closeIframe() {
    var iframe = document.getElementById(id);
    iframe.parentNode.removeChild(iframe);
}

When closing the iframe, from page "chat.html" I use:

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="javascript: window.parent.closeIframe()"" />

How can I get the ID of a specific iframe so I can close it with the above function?

Answer 1

SOLUTION

I've changed the function which create iframes and make it like this (I've send the id like parameter to "chat.html"):

function createIFRAME() {
            $.get("../../../GetIframeID", function(data){
                alert(data);

                ifrm = document.createElement("IFRAME");
                ifrm.setAttribute("id", data);
                ifrm.setAttribute("src", "chat.html?id="+data);
                //ifrm.setAttribute("scrolling", "no");
                ifrm.setAttribute("frameborder", "0");
                ifrm.style.width = 304+"px";
                ifrm.style.height = 284+"px";

                document.getElementById("content").appendChild(ifrm);
            });
        }

I modified the button for closing frame like this:

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="closeIFRAME()" />

Now I've got 2 functions: one is find in "chat.html" which has role to get the id of page from URL and send it as parameter to second function which is located in iframe's parent.

function closeIFRAME() (from "chat.html"):

function closeIFRAME() {
            alert("1");
            var param1var = getQueryVariable("id");

            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1]; 
                    }
                }
            }

            parent.closeIframe(param1var);
        }

function closeIframe(id) (from iframe's parent):

function closeIframe(id) {
            var iframe = document.getElementById(id);
            iframe.parentNode.removeChild(iframe);
        }

Thank you all for support!

Answer 2

You can try transmitting the iFrame's ID in the button's onclick.

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="javascript: window.parent.closeIframe([insert iframes ID here])"" />

Hope it'll help.

Anyway, the technologies you are using are from another age. Iframes ? Go for ajax, much easier to use now. I would even say websockets are easier to use with nodejs for a chat (but everything depends on the rest of your website).

You maybe also can try onclick="window.parent.removeChild(window)" (totally unsure if this works)