删除iframe后窗口事件丢失 [英] Window events lost after removing iframe

问题描述

我遇到一个问题，即表单嵌入在iframe中，在提交表单后，iframe将从DOM中删除。删除表单后立即（表单是最后一个有焦点的东西）我无法检测绑定到根窗口元素的事件。

框架是从一个单独的域加载的，虽然这个例子无关紧要，但只关键在于我无法控制该页面上的脚本。 / p>

我知道我无法检测iframe中的DOM事件，但所有事件都会丢失，直到用户在iframe删除后点击DOM为止。这种情况发生在 Firefox 和 Chrome 中。 IE似乎按预期将焦点返回到原始DOM。我没有在其他浏览器中测试过。

  $（window）.keydown（function（e）{
 console。 log（e.keyCode）; 
}）; 
 
 var $ iframe = $（< iframe src ='www.example.com'>）; 
 $（body）。append（$ iframe）; 
 
 window.setTimeout（function（）{
 $ iframe.remove（）; 
}，1000）; 
  

（上面的代码只是一个例子，我已经包含了一个工作的代码笔来进一步说明 - http://codepen.io/anon/pen/WQroqe ）

使用codepen -

点击点击加载iframe按钮。

确保单击iframe以使其具有焦点

iframe删除后，键入任何内容并注意DOM不记录您的击键。

点击DOM并注意你的击键记录正确。

使用案例：表格打开一个iframe并提交，然后自行删除来自DOM。我希望能够在提交表单后检测键盘事件而无需用户使用鼠标。

问题：我认为最顶层的DOM元素是窗口如果这不是捕捉键盘事件，那是什么？据我所知，目前没有其他DOM（即iframe）。我测试过这是firefox和chrome。关于发生了什么以及为什么我要做的事情的任何解释是不可能的，或者一种捕捉事件的方式将不胜感激。

（我目前的解决方案是使用MutationObserver来监视iframe消失并强制焦点回到窗口。我也知道我可以使用setInterval来连续检查iframe。这两种解决方案都让我觉得我正在做额外的工作。）

解决方案

关闭iframe后，使用 $（窗口）重点关注窗口.focus（）; 如果您必须

，您可以这样做

  $ iframe.load（function（）{
 window.setTimeout（function（）{
 console.log（deletion）; 
 $（＃deleteMe iframe）。remove （）; 
 $（窗口）.focus（）; //< ====== 
}，5000）; 
}）; 
  

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

解决方案

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);  
  });

这篇关于删除iframe后窗口事件丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！