web-dev-qa-db-fra.com

Comment fermer un iframe dans iframe lui-même

Comment utiliser javascript ou jQuery pour fermer un iframe dans iframe lui-même? J'ai essayé <a href="javascript:self.close()"> mais cela n'a pas fonctionné.

javascriptjqueryiframe
47
Stan

La "fermeture" de l'iFrame actuelle n'est pas possible mais vous pouvez dire au parent de manipuler le dom et de le rendre invisible.

Dans IFrame:

parent.closeIFrame();

En parent:

function closeIFrame(){
     $('#youriframeid').remove();
}
71
citizen conn
function closeWin()   // Tested Code
{
var someIframe = window.parent.document.getElementById('iframe_callback');
someIframe.parentNode.removeChild(window.parent.document.getElementById('iframe_callback'));
}


<input class="question" name="Close" type="button" value="Close" onClick="closeWin()" tabindex="10" />
14
user3370889

Utilisez-le pour supprimer l'iframe du parent dans l'iframe lui-même

frameElement.parentNode.removeChild(frameElement)

Il fonctionne uniquement avec la même origine (non autorisé avec l'origine croisée)

4
Isitea

Aucune de ces solutions n'a fonctionné pour moi car je suis dans un scénario inter-domaines créant un bookmarklet comme Pin It de Pinterest.

J'ai trouvé un modèle de bookmarklet sur GitHub https://Gist.github.com/kn0ll/1020251 qui a résolu le problème de la fermeture de l'Iframe en envoyant la commande depuis l'intérieur.

Étant donné que je ne peux accéder à aucun élément à partir de la fenêtre parent dans l'IFrame, cette communication ne peut être effectuée qu'en publiant des événements entre les deux fenêtres à l'aide de window.postMessage

Toutes ces étapes se trouvent sur le lien GitHub:

1- Vous devez injecter un fichier JS sur la page parent.

2- Dans ce fichier injecté sur le parent, ajoutez un listeur d'événements de fenêtre

    window.addEventListener('message', function(e) {
       var someIframe = window.parent.document.getElementById('iframeid');
       someIframe.parentNode.removeChild(window.parent.document.getElementById('iframeid'));
    });

Cet auditeur gérera la clôture et tout autre événement que vous souhaitez

3- Dans la page Iframe, vous envoyez la commande close via postMessage:

   $(this).trigger('post-message', [{
                    event: 'unload-bookmarklet'
                }]);

Suivez le modèle sur https://Gist.github.com/kn0ll/1020251 et tout ira bien!

J'espère que ça aide,

2
Rafael Araújo

son genre de hacky mais ça marche bien

 function close_frame(){
    if(!window.should_close){
        window.should_close=1;
    }else if(window.should_close==1){
        location.reload();
        //or iframe hide or whatever
    }
 }

 <iframe src="iframe_index.php" onload="close_frame()"></iframe>

puis à l'intérieur du cadre

$('#close_modal_main').click(function(){
        window.location = 'iframe_index.php?close=1';
});

et si vous voulez vous faire plaisir grâce à un

if(isset($_GET['close'])){
  die;
}

en haut de votre page de cadre pour rendre ce rechargement imperceptible

donc, fondamentalement, la première fois que le cadre se charge, il ne se cache pas, mais la prochaine fois, il appellera la fonction onload et le parent aura une fenêtre var provoquant la fermeture du cadre

1
zach