March 2, 2012

How to close iframe from inside iframe?

Question by Luca Frank Guarini

I’ve got a WordPress site where posts are loaded into an iframe.

This is the code that works:

<a class="trick" rel="<?php the_permalink() ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a>


        var post_link = $(this).attr("rel");
        $("#frame").attr("url", post_link);

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

Now, how to close this loaded iframe from inside the iframe?

The main page is index.php (main wordpress loop), the content of the iframe is single.php (single post) without header and footer.


This is what i’ve got in single.php


<script src=""></script>
            $('#frame', window.parent.document).remove();





<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' ); ?>



    <?php endwhile; endif; ?>



Answer by Starx

I know a little trick actually.

Make a function on your parent page

var closeIFrame = function() {

Inside the iframe you want to close call from anywhere you want


Tricky, isn’t it?

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!