Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Closing an iFrame via Javascript

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:

 <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"?

like image 946
Sheldon R. Avatar asked Oct 31 '22 04:10

Sheldon R.


1 Answers

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 removeChild with this one frame.style.display="none"; You can then get it back by using this line 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>
like image 199
Alex Avatar answered Nov 12 '22 10:11

Alex