如何使用 javascript 删除自身内部的 iframe答案

【问题标题】：How do I remove iframe within itself by using javascript如何使用 javascript 删除自身内部的 iframe
【发布时间】：2014-02-19 13:27:42
【问题描述】：

我知道有几个类似的问题，但由于无法解决，我不得不用附加的代码再次提问。我在 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.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，其中包含一些 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>

我可以通过单击“cntrBtn1”按钮生成 iframe，并通过单击 mainPage.xhtml 中的“cntrBtn2”删除。但是，我需要删除 iframe 本身（iFramePage.xhtml）。当我在 iFramePage.xhtml 中单击“exitBtn”时，iframe 不会消失。跨域没什么，因为mainPage.xhtml和iFramePage.xhtml在同一个JSF项目中，甚至在同一个目录下。我可以重定向父页面（查看 iFramePage.xhtml 中 closeSelf() 中的两行），但我无法使用父元素删除 iframe，为什么！请帮帮我:)

【问题讨论】：

parent 不访问iframe dom，而是访问父窗口。你或许可以试试parent.document.getElementById("iframe0").style.display='none'。或者使用亲子交流davidwalsh.name/window-iframe
而不是 "parent.document.getElementById("iframe0").style.display='none'", "parent.document.getElementById("iFrameContainer").innerHTML = ' '" 更多适当的行动，我认为。你的建议给了我灵感，谢谢。但是，我无法成功应用您消息中链接中提到的 window.postMessage。
How to close an iframe within iframe itself的可能重复

标签： javascript html jsf iframe xhtml

【解决方案1】：

使用 window.postMessage 在父级和 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);

您还可以通过 event.origin 检查 postMessage 的来源，以确保正确的 iframe 请求删除 iframe。

【讨论】：

我尝试应用您的解决方案，但无法正常工作。在您的解决方案之后，mainPage.xhtml 甚至不会生成 iframe，尽管单击了“cntrBtn1”按钮。