Window events lost after removing iframe

Question

I have an issue where a form is embedded in an iframe and after the form is submitted, the iframe is deleted from the DOM. Immediately after the form is deleted (the form was the last thing to have focus) I am unable to detect events that are bound to the root window element.

The frame is being loaded from a separate domain, although it does not matter for this example, it only matters that I have no control over the scripts on that page.

I understand that I cannot detect DOM events in the iframe, but all events are lost until the user clicks back on the DOM after iframe removal. This happens in both Firefox and Chrome. IE appears to return focus back to the original DOM as expected. I have not tested in other browsers.

 $(window).keydown(function(e){
    console.log (e.keyCode);   
 });

var $iframe = $("<iframe src='www.example.com'>");
$("body").append($iframe);

window.setTimeout(function(){
 $iframe.remove();
}, 1000);

(The code above is just an example, i have included a working codepen to illustrate further- http://codepen.io/anon/pen/WQroqe)

To use the codepen -
Click the "click to load iframe button".
Make sure you click in the iframe so it has focus
After the iframe deletes, type anything and notice the DOM does not log your key strokes.
Click on the DOM and notice that your keystrokes are being logged properly.

Use Case: Form opens an iframe and submits, then removes itself from the DOM. I want to be able to detect keyboard events after the form is submitted without the user needing to use their mouse.

Question: I thought the top most DOM element was "window" and if this is not capturing the keyboard events, what is? There are no other DOMs currently present (i.e. iframes) as far as I know. I tested this is both firefox and chrome. Any explanation as to what is happening and why what I am trying to do is not possible or a way to capture the events would be greatly appreciated.

(My current solution is to use a MutationObserver to watch for the iframe to disappear and force focus back on the window. I also know I could use a setInterval to continually check for the iframe. Both solution feel like I am doing extra work).

Answer 1

after closing the iframe, focus the window using $(window).focus(); if you must

in the sample you'd do it like

  $iframe.load(function(){
    window.setTimeout(function(){
      console.log("deleting");
      $("#deleteMe iframe").remove();
      $(window).focus(); // <======
    }, 5000);  
  });