通过 Javascript 关闭 iFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30105763/
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
Closing an iFrame via Javascript
提问by Sheldon R.
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
我正在开发一个应用程序，当按下相应的按钮时，它会出现在 iFrame 中。要关闭这些模态叠加层之一，取消按钮在父窗口中以这种方式定义：
<a href="#close" class="modalButton">Cancel</a>
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
我想用 JavaScript 函数替换它（我们称之为 onCancel() ），这样除了关闭覆盖之外，我还可以根据需要重置一些值。什么是等效于“#close”的 JavaScript？
采纳答案by Sheldon R.
The approach that works for me is to define the following JavaScript function in the parent page:
对我有用的方法是在父页面中定义以下 JavaScript 函数：
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
请注意，如果 stuffWasChanged 标志未设置为 true，则不会为相关表单定义任何操作，因此模态覆盖只会消失而不会调用任何 servlet 方法。
回答by Alex
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChildwith this one frame.style.display="none";You can then get it back by using this line frame.style.display="block";
您无法关闭 iFrame，您必须删除或隐藏它。下面的示例删除了iframe. 如果你只是想隐藏就可以替换最后一行（包含removeChild这一个frame.style.display="none";，然后你可以用这条线把它找回来frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>回答by Gnanadurai A
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
