Javascript 如何在 iframe 本身内关闭 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6754935/
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 an iframe within iframe itself
提问by Stan
How do I use javascript or jQuery to close an iframe within iframe itself? I've tried <a href="javascript:self.close()">but it didn't work.
如何使用 javascript 或 jQuery 关闭 iframe 本身内的 iframe？我试过了，<a href="javascript:self.close()">但没有用。
回答by citizen conn
"Closing" the current iFrame is not possible but you can tell the parent to manipulate the dom and make it invisible.
“关闭”当前 iFrame 是不可能的，但您可以告诉父级操作 dom 并使其不可见。
In IFrame:
在 IFrame 中：
parent.closeIFrame();
In parent:
在父级：
function closeIFrame(){
$('#youriframeid').remove();
}
回答by user3370889
function closeWin() // Tested Code
{
var someIframe = window.parent.document.getElementById('iframe_callback');
someIframe.parentNode.removeChild(window.parent.document.getElementById('iframe_callback'));
}
<input class="question" name="Close" type="button" value="Close" onClick="closeWin()" tabindex="10" />
回答by Isitea
Use this to remove iframe from parent within iframe itself
使用它从 iframe 本身内的父级中删除 iframe
frameElement.parentNode.removeChild(frameElement)
It works with same origin only(not allowed with cross origin)
它仅适用于相同的原点（不允许使用交叉原点）
回答by Rafael Araújo
None of this solution worked for me since I'm in a cross-domain scenario creating a bookmarklet like Pinterest's Pin It.
由于我在跨域场景中创建了像 Pinterest 的 Pin It 这样的书签，因此这些解决方案都不适合我。
I've found a bookmarklet template on GitHub https://gist.github.com/kn0ll/1020251that solved the problem of closing the Iframe sending the command from within it.
我在 GitHub https://gist.github.com/kn0ll/1020251上找到了一个书签模板，它解决了关闭 Iframe 从其中发送命令的问题。
Since I can't access any element from parent window within the IFrame, this communication can only be made posting events between the two windows using window.postMessage
由于我无法从 IFrame 中的父窗口访问任何元素，因此只能使用 window.postMessage 在两个窗口之间发布事件来进行这种通信
All these steps are on the GitHub link:
所有这些步骤都在 GitHub 链接上：
1- You have to inject a JS file on the parent page.
1- 您必须在父页面上注入一个 JS 文件。
2- In this file injected on the parent, add a window event listner
2- 在注入到父级的这个文件中，添加一个窗口事件监听器
window.addEventListener('message', function(e) {
var someIframe = window.parent.document.getElementById('iframeid');
someIframe.parentNode.removeChild(window.parent.document.getElementById('iframeid'));
});
This listener will handle the close and any other event you wish
此侦听器将处理关闭和您希望的任何其他事件
3- Inside the Iframe page you send the close command via postMessage:
3- 在 Iframe 页面内，您通过 postMessage 发送关闭命令：
$(this).trigger('post-message', [{
event: 'unload-bookmarklet'
}]);
Follow the template on https://gist.github.com/kn0ll/1020251and you'll be fine!
按照https://gist.github.com/kn0ll/1020251上的模板操作，你会没事的！
Hope it helps,
希望能帮助到你，
回答by zach
its kind of hacky but it works well-ish
它有点像hacky，但效果很好
function close_frame(){
if(!window.should_close){
window.should_close=1;
}else if(window.should_close==1){
location.reload();
//or iframe hide or whatever
}
}
<iframe src="iframe_index.php" onload="close_frame()"></iframe>
then inside the frame
然后在框架内
$('#close_modal_main').click(function(){
window.location = 'iframe_index.php?close=1';
});
and if you want to get fancy through a
如果你想通过一个
if(isset($_GET['close'])){
die;
}
at the top of your frame page to make that reload unnoticeable
在框架页面的顶部，使重新加载不明显
so basically the first time the frame loads it doesnt hide itself but the next time it loads itll call the onload function and the parent will have a the window var causing the frame to close
所以基本上第一次框架加载它不会隐藏自己但是下次加载它会调用onload函数并且父级将有一个导致框架关闭的窗口变量
