如何使用 javascript 删除 iframe 本身 [英] How do I remove iframe within itself by using javascript

查看：24
本文介绍了如何使用 javascript 删除 iframe 本身的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我知道有几个类似的问题，但由于无法解决，我不得不用附加的代码再次提出问题.我在 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:头><h:outputStylesheet library="css" name="style.css"/><script type="text/javascript">/** 为 iFramePage.xhtml 创建动态 iframe HTML 代码 **/函数 createIFrameHTML(){document.getElementById("iFrameContainer").innerHTML = '<div id="iframe0"><iframe src="iFramePage.xhtml" width="450px" height="300px"></iframe><;/div>';}/** 关闭 iFrame **/函数删除元素(){/*当我在这个页面内调用时，两行都正常工作，*//*..但是它不能通过从 iFramePage.xhtml 调用 *///document.getElementById("iFrameContainer").removeChild("iframe0");$('iframe0').remove();}</h:head><身体><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 id="iFrameContainer"><!-- 将通过 createIFrameHTML() 生成 iframe -->

</h:form></f:view>

另一个页面是 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:头><h:outputScript name="......js"/><h:outputStylesheet name="....css"/><脚本>/** 关闭 iFrame.**/函数 closeSelf() {/* 两行正常，但第三行不行！*///window.top.location.href = "隐藏";//parent.document.location.href = "隐藏";parent.removeElement();}</h:head><身体><input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();"/>

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

解决方案

使用 window.postMessage.

将 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(元素);}}window.addEventListener("message", receiveMessage, false);

您还可以通过 event.origin 以确保正确的 iframe 请求删除 iframe.

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆