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了,希望遇到这个问题的人会有所帮助
iframe弹出窗体丢失焦点的问题的更多相关文章
- Easyui弹出窗体在iframe的父级页面显示
今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...
- 转(C# 类似右键菜单弹出窗体)
文章来自 https://www.cnblogs.com/ahdung/p/FloatLayerBase.html 每天进步一点点 新建类 FloatLayerBase 继承Form, 自己有点小改 ...
- PopupWindow 从底部弹出窗体
第一步 : 初始化PopupWindow private void initPop() { if (view == null) { // 照片 view = View.inflate(Registe ...
- fancybox关闭弹出窗体parent.$.fancybox.close();
fancybox弹出窗体右上角会自带一个关闭窗体,而且点击遮罩层也会关闭fancybox 有时我们不须要这样进行关闭,隐藏关闭窗体,而且遮罩层不可点击 在弹出窗体页面加一链接进行关闭使用parent. ...
- MVVM模式下弹出窗体
原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...
- CSS3/jQuery自己定义弹出窗体
简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...
- gridView AspNetPager 翻页时 弹出窗体关闭报错
gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...
- Ext入门学习系列(二)弹出窗体
第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...
- C#利用API制作类似QQ一样的右下角弹出窗体
C#利用API制作类似QQ一样的右下角弹出窗体 (2009-03-21 15:02:49) 转载▼ 标签: 杂谈 分类: .NET using System;using System.Collecti ...
随机推荐
- win10如何进入安全模式的几种方法
首先,说一下安全模式的作用: 安全模式, 用途有很多,常见的作用有以下几点 1. 电脑可能由于安装了某些驱动或者软件,不兼容导致电脑启动不了,可以进入安全模式卸载 2. 电脑中病毒之后,可以进入安全模 ...
- PAT 1103 Integer Factorization
The K-P factorization of a positive integer N is to write N as the sum of the P-th power of K positi ...
- ZOJ 3687 The Review Plan I
The Review Plan I Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on ZJU. Origi ...
- 用R语言 画条形图(基于ggplot2包)
1.用qplot(x,data=data,geom.=”bar”,weight=y)+scale_y_continuous("y")画出y关于x的条形. 图中提示binwidth这 ...
- SpringBoot多数据源改造(一)
今天做一个需求,业务项目需要访问另一个项目的数据库. 常用两种方案: 1.另一个项目提供一个RestFul API,供调用方通过feign或其它httpClient等方式来访问. 2.项目中通过配置多 ...
- Mac OSX:最简单的安装ant方法
安装ant最简单的方法就是通过brew.步骤如下:1. 安装brew(如果已经安装可以跳过这步).ruby -e "$(curl -fsSL https://raw.github.com/m ...
- NPM 3 Beta为Windows用户带来利好消息
本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 近日,np ...
- mongodb mapreduce使用总结
文章来自本人个人博客: mongodb mapreduce使用总结 大家都知道,mongodb是一个非关系型数据库.也就是说.mongodb数据库中的每张表是独立存在的,表与表之间没有不论什么依赖 ...
- ASP.NET—016:ASP.NET中保存文件对话框
本想在asp.net中使用savediallog保存文件,结果提示:当应用程序不是以 UserInteractive 模式执行时显示模式对话框或窗口是无效操作. 在ASP.NET中使用例如以下方式.保 ...
- linux c编程訪问数据库
源代码例如以下: #include <stdio.h> #include <stdlib.h> #include <mysql/mysql.h> int main( ...