How to close iframe from inside iframe?

10
votes

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>

$(document).ready(function(){

    $.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>

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.

Thanks.

This is what i've got in 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>
4
jquerywordpressiframe
Closing Iframe? What do you mean? Do you want to remove inner iframe or what? - Reza Owliaei
Possible duplicate of How to close an iframe within iframe itself - Oleg V. Volkov

4 Answers

19
votes

Execute the below code from single.php which is loaded inside the iframe. This will find the iframe using the parent window as context and remove or hide it.

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

I know a little trick actually.

Make a function on your parent page

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

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

parent.closeIFrame();

Tricky, isn't it?

1
votes
// Inside the iframe    
frameElement.remove();
0
votes

I came across this problem creating a bookmarklet just like Pinterest's Pin It.

It should work cross-domain.

The only way I could work this out, was by posting events between the page inside the iframe and the parent page following this example on GitHub:

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

I've posted an answer on this other thread: https://stackoverflow.com/a/43030280/3958617

Hope it helps!