Menu
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 :)
404
To close an iframe within iframe itself with JavaScript, we use the remove the iframe. in the parent. We select the iframe with getElementById . And then we call remove to remove it.
If a user has javascript disabled, iframes will work. An iframe tag has attributes “height” and “width,” which allows the designer great latitude with dimensions and format like 300×250 , 728×90 depending on the Ad size. Iframe tag can appear anywhere on the page and several iframes can be added if wished to.
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.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
