Question

当我按下相应的按钮时，我正在使用模式叠加层显示在iFrames中。要关闭其中一个模态叠加层，可以通过以下方式在父窗口中定义“取消”按钮：

 <a href="#close" class="modalButton">Cancel</a>

我想用JavaScript函数替换它（让我们把它称为onCancel（））所以除了关闭叠加层之外我还可以根据需要重置一些值。什么是等同于＃34;＃close＆＃34;？

的JavaScript

Answer 1

您无法关闭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>

Answer 2

<!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>

Answer 3

对我有用的方法是在父页面中定义以下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 = '#';
  }

请注意，如果stuffWasChanged标志未设置为true，则不会为相关表单定义任何操作，因此模式覆盖只会在没有调用任何servlet方法的情况下消失。

通过Javascript关闭iFrame

3 个答案: