IT技术博客大学习 共学习 共进步

ie下iframe输入框焦点丢失解决方案

深海博客 2012-09-20 13:53:30 浏览 5,387 次

在弹出层包含富编辑器时(既含有iframe时),点击窗体任何部分,然后关闭弹出层后再次打开弹出层。这时候页面所有输入框input无法获得焦点但是链接、按钮都可以获取到,页面也不报任何错误。这种情况只是在IE下出现,我想是dom冲突了。

解决方法:

关于弹出层关闭,一般有两种方式:一是利用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();

建议继续学习

  1. iframe大小自适应 (阅读 9,885)
  2. iframe里src="about:blank"的问题。 (阅读 7,902)
  3. 跨域请求的iframe解决方案(1) (阅读 6,323)
  4. BO报表系统嵌入Iframe在firefox下的错误修改 (阅读 5,544)
  5. 三谈Iframe自适应高度 (阅读 4,585)
  6. Google+开发团队分享经验 (阅读 4,480)
  7. 使用document.domain和iframe实现站内AJAX跨域 (阅读 4,465)
  8. 跨域请求的iframe解决方案(2) (阅读 4,128)
  9. IFrame带来的Session问题 (阅读 3,945)
  10. iframe自适应高度代码 (阅读 3,823)