技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> ie下iframe输入框焦点丢失解决方案

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

浏览:4296次  出处信息

在弹出层包含富编辑器时(既含有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大小自适应    (阅读:8810)
  2. iframe里src="about:blank"的问题。    (阅读:6847)
  3. 跨域请求的iframe解决方案(1)    (阅读:5392)
  4. BO报表系统嵌入Iframe在firefox下的错误修改    (阅读:4632)
  5. 三谈Iframe自适应高度    (阅读:3639)
  6. 使用document.domain和iframe实现站内AJAX跨域    (阅读:3314)
  7. Google+开发团队分享经验    (阅读:3310)
  8. 跨域请求的iframe解决方案(2)    (阅读:3146)
  9. IFrame带来的Session问题    (阅读:2789)
  10. iframe自适应高度代码    (阅读:2805)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1