How do I remove iframe within itself by using javascript

html, iframe, javascript, jsf, xhtml

Solution

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.

Problem

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 :)

Original source

Related problems