1

I have a modal (a React component from my application), and inside it i have an iframe. I don't have control over the iframe, and I know it calls window.close after some action is taken. Is there a way to detect when the content inside the iframe called window.close, so I can also close the modal?

Important: I'm not using jQuery, only pure javascript.

iframe code:

      <iframe height='500' width='340'                      
        src='http://content_url'
        ref={(f) => { this.ifr = f; }}>
      </iframe>

with this ref, I can refer to the iframe from my react component:

  componentDidMount() {
    this.ifr.onload = () => {
      //whatever action
    };
  }

but I can't do what I want with the unload event, because the iframe is not unloaded, it just calls window.close inside it.

Thanks!

Danilo Ruziska
  • 457
  • 2
  • 6
  • 13
  • How is the new window opened ? – adeneo Aug 29 '17 at 18:57
  • Does calling window.close even work with an iframe? What is supposed to happen when you "close" the window instance it represents - is the `iframe` element in the parent document supposed to dissolve, or - what ...? – CBroe Aug 29 '17 at 19:01
  • @adeneo I don't know if I understood the question correctly, but I have a react modal component, and when it calls the render hook, there's an iframe inside it pointing to a third party url. The user does some interaction within the iframe and then the third party component calls window.close. I don't have control over this component – Danilo Ruziska Aug 29 '17 at 19:05
  • But what window closes when `window.close` is called? To remove an iFrame one simply removes the element, calling `window.close` won't do it unless there actually is a window. – adeneo Aug 29 '17 at 19:07
  • @adeneo It's actually whe window embeded in the iframe. The result is my modal gets blank, the iframe becomes with an empty body – Danilo Ruziska Aug 29 '17 at 19:09
  • Then you have a problem. If you can't access the iFrame due to the same-origin policy, you won't know when the window was closed, and do what you really should be asking here, remove the Iframe and close the modal. – adeneo Aug 29 '17 at 19:12
  • @adeneo I created the iframe, but not the content inside it...and it's this content that calls window.close...so, there's no available option due to same-origin policy? – Danilo Ruziska Aug 29 '17 at 19:14
  • If I'm getting it, you created the iFrame, but is the URL from the same origin? If it's not, you still don't have access to the iFrames content, all you can do is remove the iFrame, but you won't know when, as you don't have access to the iFrame, and can't check if the window that was opened in the iFrame was closed. – adeneo Aug 29 '17 at 19:25
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153168/discussion-between-danilo-ruziska-and-adeneo). – Danilo Ruziska Aug 29 '17 at 19:28
  • @DaniloRuziska were you able to address this issue? I am having the same issue. – Niral Munjariya Dec 31 '20 at 10:38

1 Answers1

2

You can try to set window.close to some other function and catch when the iframe calls it.

  var closing = window.close;
  window.close = function () {
    console.log('window close fired!');
    closing();
  };

Better way even creating event emitters.

  var event = new Event('onCloseWindow');

  // Listen for the event.
  elem.addEventListener('onCloseWindow', function (e) { ... }, false);

  var closing = window.close;
  window.close = function () {
    // Dispatch the event.
    elem.dispatchEvent(event);
    closing();
  };
bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • 1
    can you provide a bit more details on how to use this? I'm a little confused what should be called in the parent and what should be called in the child – Kevin Danikowski Oct 14 '20 at 17:48