How do I remove iframe within itself by using javascript

Question

I know that there are several similar questions, but I have to ask the question again with attached code because of being unable to work out. I have two .xhtml file in JSF project. One is mainPage.xhtml has a button that generates dynamic html code to create an iframe (iFramePage.xhtml) and show it on the browser;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <h:outputStylesheet library="css" name="style.css" />

    <script type="text/javascript">

        /** Create dynamic iframe HTML code for iFramePage.xhtml **/
        function createIFrameHTML(){
            document.getElementById("iFrameContainer").innerHTML =  '<div id="iframe0"><iframe src="iFramePage.xhtml" width="450px" height="300px"></iframe></div>';
        }

        /** Close iFrame **/
        function removeElement() {

        /*Both lines work properly when I call inside this page, */
        /*..however it does not work by calling from iFramePage.xhtml */                

        //document.getElementById("iFrameContainer").removeChild("iframe0");
        $('iframe0').remove();
        }
    </script>
</h:head>
<body>
    <f:view>
        <h:form id="mainForm">

            <!-- Control Menu -->
            <div id="cntrMenu">
                <h:commandButton id="cntrBtn1" 
                    onclick="createIFrameHTML();return false;"></h:commandButton>
                <h:commandButton id="cntrBtn2" 
                    onclick="removeElement();return false;"></h:commandButton>  
            </div>

            <div id="iFrameContainer">
                <!-- an iframe will be generated by createIFrameHTML() -->
            </div>
        </h:form>
    </f:view>
</body>
</html>

The other page is iFramePage.xhtml that has some html and javascript code;

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <h:outputScript name="......js" />
    <h:outputStylesheet name="....css" />
    <script>

        /** Close iFrame.**/
        function closeSelf() {
            /* Two lines works properly, however third line does not work!*/
            //window.top.location.href = "HIDDEN"; 
            //parent.document.location.href = "HIDDEN";
            parent.removeElement();

        }
    </script>
</h:head>
<body>  
    <input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();" />
</body>
</html>

I can generate the iframe by clicking "cntrBtn1" button and removing by clicking "cntrBtn2" inside mainPage.xhtml. However, I need to remove the iframe within itself (iFramePage.xhtml). When I click "exitBtn" in iFramePage.xhtml, the iframe does not disappear. There is nothing about cross-domain, because mainPage.xhtml and iFramePage.xhtml are in the same JSF project, even in the same directory. I can redirect the parent page (looks at two lines in closeSelf() in iFramePage.xhtml), but I cannot remove the iframe by using parent element, why! Please, help me :)

Answer 1

Communicate between the parent and iframe using window.postMessage .

Replace the closeSelf() function in iframe page to the following :

function closeSelf() {
   parent.window.postMessage("removetheiframe", "*");
}

and on the parent page, add the following code to listen when the iframe sends a message :

function receiveMessage(event){
   if (event.data=="removetheiframe"){
      var element = document.getElementById('iframe-element');
      element.parentNode.removeChild(element);
   }
}
window.addEventListener("message", receiveMessage, false);

You can also check the origin of postMessage by event.origin to make sure that the right iframe requested to remove the iframe .

How do I remove iframe within itself by using javascript

Question

1 answers

solution1
11 2014-02-19 13:54:23

How do I remove iframe within itself by using javascript

Question

1 answers

solution1 11 2014-02-19 13:54:23

solution1
11 2014-02-19 13:54:23