How to close iframe from inside iframe?
34,852
Solution 1
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();
Solution 2
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?
Solution 3
// Inside the iframe
frameElement.remove();
Author by
Luca Frank Guarini
Updated on July 31, 2022Comments
-
Luca Frank Guarini almost 2 years
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>
-
Jasper about 12 yearsIf you declare a function like that it doesn't get added to the
window
object, I believe you have to do this:var closeIFrame = function () { ... }
-
Luca Frank Guarini about 12 yearsI've tried this but doesn't work, you can see my single.php content edited in my question...
-
ShankarSangoli about 12 yearsJust making sure. Is iframe in the same domain?
-
Luca Frank Guarini about 12 yearsYes, sure. The iframe load a wordpress post.
-
ShankarSangoli about 12 yearsThen it should find the iframe and close it. Can you console.log and see what
$('#iframe', window.parent.document)
gives? -
Luca Frank Guarini about 12 yearsConsole.log doesn't give nothing.. It's true what have I added in single.php?
-
ShankarSangoli about 12 yearsWhat do you mean by doesn't give nothing?
-
Felipe Alameda A over 10 yearsThat does it. Thanks.
-
Sohel Pathan about 4 yearsI found this answer helpful. This is the solution which I was searching for hours.