jQuery 如何从 iframe 内部关闭 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9538886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close iframe from inside iframe?
提问by Luca Frank Guarini
I've got a Wordpress site where posts are loaded into an iframe.
我有一个 Wordpress 网站，帖子被加载到 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>
$(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?
现在，如何从 iframe 内部关闭这个加载的 iframe？
The main page is index.php (main wordpress loop), the content of the iframe is single.php (single post) without header and footer.
主页是index.php（wordpress主循环），iframe的内容是single.php（单篇文章），没有页眉和页脚。
Thanks.
谢谢。
This is what i've got in single.php
这是我在 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>
回答by ShankarSangoli
Execute the below code from single.phpwhich is loaded inside the iframe. This will find the iframeusing the parent windowas context and remove or hide it.
执行以下代码，single.php从中加载iframe. 这将找到iframe使用父级window作为上下文并删除或隐藏它。
//You can call hide() if you want to just hide it
$('#iframe', window.parent.document).remove();
回答by Starx
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
在 iframe 内，您想从任何您想要的地方关闭呼叫
parent.closeIFrame();
Tricky, isn't it?
棘手，不是吗？
回答by wilsonpage
// Inside the iframe
frameElement.remove();
回答by Rafael Araújo
I came across this problem creating a bookmarklet just like Pinterest's Pin It.
我在创建书签时遇到了这个问题，就像 Pinterest 的 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:
我能解决这个问题的唯一方法是在 iframe 内的页面和 GitHub 上的这个示例之后的父页面之间发布事件：
https://gist.github.com/kn0ll/1020251
https://gist.github.com/kn0ll/1020251
I've posted an answer on this other thread: https://stackoverflow.com/a/43030280/3958617
我在另一个线程上发布了一个答案：https: //stackoverflow.com/a/43030280/3958617
Hope it helps!
希望能帮助到你！
