如何通过使用javascript删除自身内部的iframe [英] How do I remove iframe within itself by using javascript
问题描述
我知道有几个类似的问题，但由于无法解决问题，我必须再次用附加代码提问。
我在JSF项目中有两个.xhtml文件。一个是mainPage.xhtml有一个生成动态html代码的按钮来创建iframe（iFramePage.xhtml）并在浏览器上显示它;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
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 =cssname =style.css/>
< script type =text / javascript>
$ b $ / **为iFramePage.xhtml创建动态iframe HTML代码** /
function createIFrameHTML（）{
document.getElementById（iFrameContainer）。innerHTML ='< div id =iframe0>< iframe src =iFramePage.xhtmlwidth =450pxheight =300px>< / iframe>< / div>';
}
/ **关闭iframe ** /
function removeElement（）{
/ *当我在此页面内调用时， ，* /
/ * ..但它不能通过调用iFramePage.xhtml * /
//document.getElementById(\"iFrameContainer\").removeChild(\"iframe0）;
$（'iframe0'）。remove（）;
}
< / script>
< / h：头>
< body>
< f：view>
< h：form id =mainForm>
<！ - - 控制菜单 - >
< 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>
<！ - iframe将由createIFrameHTML（） - >生成。
< / div>
< / h：表格>
< / f：view>
< / body>
< / html>
另一个页面是iFramePage.xhtml，它包含一些html和javascript代码;
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/ TR / XHTML1 / DTD / XHTML1-transitional.dtd>
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：头>
< h：outputScript name =...... js/>
< h：outputStylesheet name =.... css/>
< script>
$ b / **关闭iFrame ** /
函数closeSelf（）{
/ *两行可以正常工作，但是第三行不行！* /
//window.top.location.href =HIDDEN;
//parent.document.location.href =HIDDEN;
parent.removeElement（）;
}
< / script>
< / h：头>
< body>
< input jsfc =h：commandButtonid =exitBtnvalue =Kapatonclick =closeSelf（）; />
< / body>
< / html>
我可以通过点击cntrBtn1按钮生成iframe，然后通过点击mainPage中的cntrBtn2 XHTML。但是，我需要删除自身内部的iframe（iFramePage.xhtml）。当我点击iFramePage.xhtml中的exitBtn时，iframe不会消失。没有关于跨域的内容，因为mainPage.xhtml和iFramePage.xhtml在同一个JSF项目中，即使在同一个目录中。我可以重定向父页面（在iFramePage.xhtml的closeSelf（）中查看两行），但是我无法通过使用父元素删除iframe，为什么！请帮助我：）
使用 window.postMessage 。
将 closeSelf（）函数替换为 iframe 页：
function closeSelf（）{
parent.window.postMessage（removetheiframe，*）;
}
并在父页面上添加以下代码以侦听 iframe 发送消息：
函数receiveMessage（event）{
if（event.data = =removetheiframe）{
var element = document.getElementById（'iframe-element'）;
element.parentNode.removeChild（element）;
}
}
window.addEventListener（message，receiveMessage，false）;
您还可以通过
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 :)
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.
这篇关于如何通过使用javascript删除自身内部的iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
