¿Cómo cerrar iframe desde dentro de iframe?

3 minutos de lectura

avatar de usuario
Luca Frank Guarini

Tengo un sitio de WordPress donde las publicaciones se cargan en un iframe.

Este es el código que funciona:

<a class="trick" rel="https://stackoverflow.com/questions/9538886/<?php the_permalink() ?>" href="https://stackoverflow.com/questions/9538886/<?php the_permalink() ?>"><?php the_title(); ?></a>

$(documento).listo(función(){

    $.ajaxSetup({cache:false});
    $(".trick").click(function(){
        var post_link = $(this).attr("rel");
        $("#frame").css("display","block");
        $("#frame").attr("url", post_link);
        $("body").css("overflow","hidden");
    });

  });         </script>
<iframe id="frame" frameborder="no" allowtransparency="true" width="100%" height="100%" scrolling="no" src=""></iframe>

Ahora, ¿cómo cerrar este iframe cargado desde dentro del iframe?

La página principal es index.php (bucle principal de wordpress), el contenido del iframe es single.php (publicación única) sin encabezado ni pie de página.

Gracias.


Esto es lo que tengo en single.php

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){
        $("#close").click(function(){
            $('#frame', window.parent.document).remove();

             });

        });

    </script>


</head> 

<body>
<div id="container-single">
    <button id="close" >Close</button>



    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <article <?php post_class('single') ?> id="post-<?php the_ID(); ?>">

            <h1 class="entry-title"><?php the_title(); ?></h1>

            <div class="entry-content">

                <?php the_content(); ?>

                <?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>

                <?php the_tags( 'Tags: ', ', ', ''); ?>

                <?php include (TEMPLATEPATH . '/_/inc/meta.php' ); ?>

            </div>


        </article>



    <?php endwhile; endif; ?>

    </div>

</body>

  • ¿Iframe de cierre? ¿Qué quieres decir? ¿Quieres eliminar el iframe interno o qué?

    – Reza Owliaei

    2 de marzo de 2012 a las 19:06

  • Posible duplicado de Cómo cerrar un iframe dentro del propio iframe

    – Oleg V. Volkov

    13 de julio de 2016 a las 22:43

Ejecute el siguiente código desde single.php que se carga dentro del iframe. Esto encontrará el iframe usando el padre window como contexto y eliminarlo u ocultarlo.

//You can call hide() if you want to just hide it
$('#iframe', window.parent.document).remove();

  • He intentado esto pero no funciona, puedes ver mi contenido single.php editado en mi pregunta…

    –Luca Frank Guarini

    2 de marzo de 2012 a las 19:17

  • Solo asegurándome. ¿El iframe está en el mismo dominio?

    – Shankar Sangoli

    2 de marzo de 2012 a las 19:19

  • Si seguro. El iframe carga una publicación de wordpress.

    –Luca Frank Guarini

    2 de marzo de 2012 a las 19:20

  • Luego debería encontrar el iframe y cerrarlo. ¿Puedes console.log y ver qué $('#iframe', window.parent.document) ¿da?

    – Shankar Sangoli

    2 de marzo de 2012 a las 19:24

  • Console.log no da nada. Es cierto, ¿qué he agregado en single.php?

    –Luca Frank Guarini

    2 de marzo de 2012 a las 19:29

Sé un pequeño truco en realidad.

Haz una función en tu página principal

var closeIFrame = function() {
     $('#iframeid').remove();
}

Dentro del iframe quieres cerrar la llamada desde donde quieras

parent.closeIFrame();

Difícil, ¿no?

  • Si declara una función como esa, no se agrega a la window objeto, creo que tienes que hacer esto: var closeIFrame = function () { ... }

    – jaspe

    2 de marzo de 2012 a las 19:08

  • Encontré esta respuesta útil. Esta es la solución que estuve buscando durante horas.

    – Sohel Pathán

    22 de abril de 2020 a las 6:03

// Inside the iframe    
frameElement.remove();

avatar de usuario
Rafael Araújo

Encontré este problema al crear un bookmarklet como Pin It de Pinterest.

Debería funcionar entre dominios.

La única forma en que pude resolver esto fue publicando eventos entre la página dentro del iframe y la página principal siguiendo este ejemplo en GitHub:

https://gist.github.com/kn0ll/1020251

He publicado una respuesta en este otro hilo: https://stackoverflow.com/a/43030280/3958617

¡Espero eso ayude!

¿Ha sido útil esta solución?