好像在不同的浏览器都有这个现象,用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了,希望遇到这个问题的人会有所帮助

iframe弹出窗体丢失焦点的问题的更多相关文章

  1. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

  2. 转(C# 类似右键菜单弹出窗体)

    文章来自 https://www.cnblogs.com/ahdung/p/FloatLayerBase.html 每天进步一点点 新建类  FloatLayerBase 继承Form, 自己有点小改 ...

  3. PopupWindow 从底部弹出窗体

    第一步  : 初始化PopupWindow private void initPop() { if (view == null) { // 照片 view = View.inflate(Registe ...

  4. fancybox关闭弹出窗体parent.$.fancybox.close();

    fancybox弹出窗体右上角会自带一个关闭窗体,而且点击遮罩层也会关闭fancybox 有时我们不须要这样进行关闭,隐藏关闭窗体,而且遮罩层不可点击 在弹出窗体页面加一链接进行关闭使用parent. ...

  5. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

  6. CSS3/jQuery自己定义弹出窗体

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  7. gridView AspNetPager 翻页时 弹出窗体关闭报错

    gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...

  8. Ext入门学习系列(二)弹出窗体

    第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...

  9. C#利用API制作类似QQ一样的右下角弹出窗体

    C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...

随机推荐

  1. react 子组件调用父组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  2. 【Apache Kafka】二、Kafka安装及简单示例

    (一)Apache Kafka安装 1.安装环境与前提条件   安装环境:Ubuntu16.04   前提条件: ubuntu系统下安装好jdk 1.8以上版本,正确配置环境变量 ubuntu系统下安 ...

  3. HDU-1864&&HDU-2602(01背包问题)

    DP-01背包问题例题 输入处理有点恶心人,不过处理完后就是简单的DP了 从头开始dp[i]表示从0开始到i的最优结果,最后从都边里dp数组,求得最大的报销额. 对于每个i都要从头维护最优结果.(二刷 ...

  4. centOS防火墙

    默认防火墙firewall #停止firewall systemcl stop firewall.service #禁止firewall开机启动 systemctl disable firewall. ...

  5. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  6. MySQL数据库操作(一)

    一.数据操作 1.显示数据库 show databases; 2.创建数据库 #utf- create database 数据库名称 default charset utf8 collate utf8 ...

  7. IDEA git commit push revert

    Revert uncommitted changes You can always undo the changes you've done locally before you have commi ...

  8. Spring Cloud 之 Cookie 丢失 与 Host 传递

    通过spring zuul 代理至后台,写入Cookie发现无法写入,到浏览器中,和无法获取Domain域名 通过长时间的度娘和求助别人发现:Spring-zuul  需要加入以下配置 zuul.se ...

  9. N天学习一个linux命令之vmstat

    用途 查看系统资源整体使用情况,包括进程数量,CPU,内存,IO,swap等资源统计信息 用法 vmstat [options] [delay [ count]] 常用选项 -a 显示active/i ...

  10. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...