Comment puis-je supprimer iframe en lui-même en utilisant javascript

Je sais qu'il y a plusieurs questions similaires, mais je dois recommencer la question avec le code ci-joint en raison de l'impossibilité de travailler. J'ai deux fichiers .xhtml dans le projet JSF. L'un est mainPage.xhtml dispose d'un bouton qui génère un code html dynamique pour créer un iframe (iFramePage.xhtml) et le montrer sur le navigateur;

<!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> 

L'autre page est iFramePage.xhtml qui possède un code html et 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> 

Je peux générer l'iframe en cliquant sur le bouton "cntrBtn1" et en enlevant en cliquant sur "cntrBtn2" dans mainPage.xhtml. Cependant, je dois supprimer l'iframe à l'intérieur même (iFramePage.xhtml). Lorsque je clique sur "exitBtn" dans iFramePage.xhtml, l'iframe ne disparaît pas. Il n'y a rien à propos de cross-domain, car mainPage.xhtml et iFramePage.xhtml sont dans le même projet JSF, même dans le même répertoire. Je peux rediriger la page parent (regarde deux lignes dans closeSelf () dans iFramePage.xhtml), mais je ne peux pas supprimer l'iframe en utilisant l'élément parent, pourquoi! Aidez-moi, s'il vous plaît 🙂

Communiquez entre le parent et l'iframe en utilisant window.postMessage .

Remplacez la fonction closeSelf () dans la page iframe par la suivante:

 function closeSelf() { parent.window.postMessage("removetheiframe", "*"); } 

Et sur la page parent, ajoutez le code suivant pour écouter lorsque l' iframe envoie un message:

 function receiveMessage(event){ if (event.data=="removetheiframe"){ var element = document.getElementById('iframe-element'); element.parentNode.removeChild(element); } } window.addEventListener("message", receiveMessage, false); 

Vous pouvez également vérifier l'origine de PostMessage par event.origin pour vous assurer que le bon iframe a demandé de supprimer l' iframe .