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

Я знаю, что есть несколько подобных вопросов, но я должен снова задать вопрос с прикрепленным кодом из-за невозможности его разработки. У меня есть два файла .xhtml в проекте JSF. Один из них - mainPage.xhtml имеет кнопку, которая генерирует динамический html-код для создания iframe (iFramePage.xhtml) и показывает его в браузере;Как удалить iframe внутри себя с помощью 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: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 с помощью родительского элемента, почему! Пожалуйста, помогите мне :)

источник

2014-02-19 séan35

'parent' не имеет доступа к' iframe' dom, а родительскому окну. Вы могли бы попробовать «parent.document.getElementById (« iframe0 »). Style.display = 'none''. Или используйте родительское дочернее сообщение http://davidwalsh.name/window-iframe – TastySpaceApple

Вместо "parent.document.getElementById (" iframe0 "). Style.display = 'none'", "parent.document.getElementById (" iFrameContainer ") .innerHTML = '' "- более правильное действие, я думаю. Ваш совет дал мне вдохновение, спасибо. Однако мне не удалось применить приложение window.postMessage, указанное в ссылке в вашем сообщении. –

Возможный дубликат [Как закрыть iframe внутри самого iframe] (http://stackoverflow.com/questions/6754935/how-to-close-an-iframe-within-iframe-itself) –

Связь между родительским и 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.

источник

2014-02-19 13:54:23 Subin

Я попытался применить ваше решение , но я не мог нормально работать. После вашего решения mainPage.xhtml даже не генерирует iframe, хотя нажата кнопка «cntrBtn1». –

@ séan35 попробуйте мой обновленный ответ – Subin

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

ответ

Смежные вопросы