Как удалить iframe внутри самого себя с помощью javascript

Question

Дополнительно

Источник Неподдерживаемая версия AMP Редактировать

Как удалить iframe внутри самого себя с помощью javascript

Я знаю, что есть несколько похожих вопросов, но я вынужден задать вопрос снова с прикрепленным кодом, потому что не могу разобраться. У меня есть два .xhtml файла в JSF проекте. Один - 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>

Я могу создать iframe, нажав кнопку "cntrBtn1" и удалить, нажав "cntrBtn2" внутри mainPage.xhtml. Однако мне нужно удалить iframe внутри него самого (iFramePage.xhtml). Когда я нажимаю "exitBtn" в iFramePage.xhtml, iframe не исчезает. О кросс-доменности речи не идет, так как mainPage.xhtml и iFramePage.xhtml находятся в одном проекте JSF, даже в одной директории. Я могу перенаправить родительскую страницу (смотрит на две строки в closeSelf() в iFramePage.xhtml), но я не могу удалить iframe с помощью элемента parent, почему! Пожалуйста, помогите мне :)

séan35

Редактировал вопрос 28-го февраля 2014 в 12:35

Программирование

iframe xhtml javascript html jsf

19-го февраля 2014 в 1:27

20 просмотров

Subin · Answer 1 · 2014-02-19T13:54:23+00:00

Обмен данными между родительским и iframe с помощью window.postMessage.

Замените функцию closeSelf() в странице iframe на следующую:

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 по event.origin, чтобы убедиться, что правильный iframe запросил удаление iframe.