iframe弹出窗体丢失焦点的问题

好像在不同的浏览器都有这个现象，用javascript弹出一个iframe的窗口，第一次input的焦点是正常的，然后弹出第二次的时候，选择，按钮都可以获取到，但是input无法获得焦点，而且页面不报任何错误。

以下是摘抄的原因以及解决方法：

问题已解决，不过还是把解决方法说一下，遇到类似bug的可以参考一下

先说一下我弹出层的实现方法，具体代码不贴了，只是说一下流程：

showLogin函数是创建弹出层函数，在该函数里创建一个父div，一个iframe页面（弹出窗体）；
closeIframediv是关闭弹出层；

关于弹出层关闭，一般有两种方式：一是利用div隐藏或显示来控制弹出层的显示与隐藏；二是利用DOM直接移除弹出层。

我采用的是第二种，网上资料说：

“ IE 下在移除父层的 DIV 的时候，也就是 IFrame 外层的 DIV 的时候,IE 并没有将内部的 IFrame 从 DOM 中移除,而下次触发函数创建此 IFrame 的时候,使会产生 DOM 冲突,所以解决方法就是在移除父层的 DIV 的时候,先将内部的 IFrame 也移除”

根据上面说法，我在点击“关闭”按钮时执行下面代码：

document.body.removeChild(document.getElementById("iframeBox"));//移除iframe
document.body.removeChild(document.getElementById(“divId”));//移除iframe父div

但是还是没解决上面的bug，其实我理解的是当移除某个元素时，出现上面bug是因为该元素并没有从内存中移除，后来发现一个CollectGarbage()函数，该函数是强制回收内存。在移除相应元素后执行该方法，强制回收内存；但是这个函数只是在IE下面才能识别的，所以要判断浏览器是否是ie才可以。这样可以解决问题。

其实有个更简单的方法，在销毁iframe之后或创建iframe后，设置一个input焦点，这样就不用判断浏览器了，直接在iframe里添加一句：

document.getElementById("username").focus();

遇到这个问题，使用了@张洪保的方法，但是不知道是不是环境不同（我是win8，ie10），上网也找了很多资料，都没能解决；不过注意到一点，就是实际上是焦点失去了，如何把焦点找回来。根据这个出发点，就用一个奇葩方法解决了，加了个input控件，跟iframe同一父div下，然后iframe加载后把焦点放到这个控件上，这样问题就解决的，只要把这个input位置放到看不到的地方就ok了，希望遇到这个问题的人会有所帮助

iframe弹出窗体丢失焦点的问题

相关推荐