如何使用javascript删除iframe本身
我知道有几个类似的问题,但我不得不再问一次,因为我无法解决这个问题。 我在JSF项目中有两个.xhtml文件。一个是mainPage.xhtml,它有一个按钮,可以生成动态html代码来创建iframe(iFramePage.xhtml)并在浏览器上显示它如何使用javascript删除iframe本身,javascript,html,jsf,iframe,xhtml,Javascript,Html,Jsf,Iframe,Xhtml,我知道有几个类似的问题,但我不得不再问一次,因为我无法解决这个问题。 我在JSF项目中有两个.xhtml文件。一个是mainPage.xhtml,它有一个按钮,可以生成动态html代码来创建iframe(iFramePage.xhtml)并在浏览器上显示它 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
<!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>
/**为iFramePage.xhtml创建动态iframe HTML代码**/
函数createIFrameHTML(){
document.getElementById(“iFrameContainer”).innerHTML='';
}
/**关闭iFrame**/
函数removeElement(){
/*当我在页面内调用时,两行都正常工作*/
/*…但是,通过从iFramePage.xhtml*调用它不起作用
//document.getElementById(“iFrameContainer”).removeChild(“iframe0”);
$('iframe0')。删除();
}
另一个页面是iFramePage.xhtml,其中包含一些html和javascript代码
<!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>
/**关闭iFrame**/
函数closeSelf(){
/*两条线正常工作,但第三条线不工作*/
//window.top.location.href=“隐藏”;
//parent.document.location.href=“隐藏”;
parent.removelement();
}
我可以通过单击“cntrBtn1”按钮生成iframe,并通过单击mainPage.xhtml内的“cntrBtn2”删除iframe。但是,我需要删除iframe本身(iFramePage.xhtml)。当我在iFramePage.xhtml中单击“exitBtn”时,iframe不会消失。跨域没有任何关系,因为mainPage.xhtml和iFramePage.xhtml在同一个JSF项目中,甚至在同一个目录中。我可以重定向父页面(查看iFramePage.xhtml中closeSelf()中的两行),但是我不能使用父元素删除iframe,为什么!请帮助我:)使用在家长和iframe之间进行通信 将iframe页面中的closeSelf()函数替换为以下内容:
function closeSelf() {
parent.window.postMessage("removetheiframe", "*");
}
在父页面上,添加以下代码以在iframe发送消息时收听:
function receiveMessage(event){
if (event.data=="removetheiframe"){
var element = document.getElementById('iframe-element');
element.parentNode.removeChild(element);
}
}
window.addEventListener("message", receiveMessage, false);
您还可以通过检查postMessage的来源,以确保请求删除iframe的右侧iframe不访问
iframe
dom,而是访问父窗口。您可以尝试parent.document.getElementById(“iframe0”).style.display='none'
。或者使用父子通信而不是“parent.document.getElementById(“iframe0”).style.display='none'”,“parent.document.getElementById(“iFrameContainer”).innerHTML=”,我认为更合适。你的建议给了我灵感,谢谢。但是,我无法成功应用您邮件中链接中提到的window.postMessage。我试图应用您的解决方案,但无法正常工作,可能重复。在解决方案之后,mainPage.xhtml甚至不会生成iframe,尽管单击了“cntrBtn1”按钮。