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了,希望遇到这个问题的人会有所帮助