zoukankan      html  css  js  c++  java
  • iframe弹出窗体丢失焦点的问题

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

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

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

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

    showLogin函数是创建弹出层函数,在该函数里创建一个父div,一个iframe页面(弹出窗体);
    closeIframediv是关闭弹出层;

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

    我采用的是第二种,网上资料说:

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

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

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

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

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

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

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

     

  • 相关阅读:
    回来了
    【Docker】Docker学习笔记:shipyard使用
    【Docker】Docker学习笔记:安装部署
    【LVS】LVS用windows作为realserver的设置方法
    【linux常用命令】linux命令工具基础
    【linux工具】crontab
    【开源软件】windows环境下libcurl编译
    【工作笔记】CPU亲和性
    【转】多线程or多进程
    【学习笔记】git常用命令
  • 原文地址:https://www.cnblogs.com/grkin/p/3384147.html
Copyright © 2011-2022 走看看