6

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

4
  • Not sure what you mean by "closing" an iFrame, can't you just remove the element ?
    – adeneo
    May 7, 2015 at 15:40
  • href="#close" is just a link that jumps to the close-anchor (name="close"). If this does anything else there is other code triggering on click.
    – Halcyon
    May 7, 2015 at 15:41
  • #close won't "close" an iframe (by which I assume you mean "remove it from the DOM"). It's a link to an element with id=close. You probably already have some JavaScript intercepting that to get the effect you want, but we can't see that JS.
    – Quentin
    May 7, 2015 at 15:42
  • Unlike other # references in this application, #close is undefined, so I believe what happens when those Cancel buttons are clicked is nothing
    – Sheldon R.
    May 7, 2015 at 16:21

3 Answers 3

3

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>

4
  • Thanks for your answer. I've come up with an alternative solution: since I plan to set a form action then submit it to call a servlet method to reset values if some have changed, in the case where none have changed I'll just leave the action blank...
    – Sheldon R.
    May 7, 2015 at 16:24
  • Actually, now that I've tried your approach, I see that it works a little too well for my situation, in that once the iFrame is removed, it can't be reinstantiated...
    – Sheldon R.
    May 7, 2015 at 16:32
  • 1
    In that case just replace that very last line of code with frame.style.display="none"; Then when you want it back change it to .style.display="block"
    – DasBeasto
    May 7, 2015 at 16:48
  • Okay, it sounds like you're hiding the frame instead of removing it, so that would have probably worked for me too. But I ended up modifying my code so that I no longer need to call a Javascript function to handle a "cancel" event, so I reinstated the use of "#close" as the anchor reference for that button...
    – Sheldon R.
    May 11, 2015 at 14:43
0
<!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

The approach that works for me is to define the following JavaScript function in 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 = '#';
  }

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.