Geek Answers Handbook

Closing iFrame via Javascript

I am working on an application with modal overlays that appear in iFrames when the corresponding buttons are clicked. To close one of these modal overlays, the Cancel button is defined in the parent window as follows:

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

I would like to replace this with a JavaScript function (let it be called OnCancel ()), so I can reset some values ​​if necessary in addition to closing the overlay. What is the JavaScript equivalent for "#close"?

+4
source share
3 answers

The approach that works for me is to define the following JavaScript function on the parent page:

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, , .

0

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>
Hide result
+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>
0
source

More articles:


All Articles