js父窗口关闭时子窗口随之关闭完美解决方案


Posted in Javascript onApril 29, 2014

最近,遇到一个权限管理的系统。由于权限管理的系统和本来的系统风格不一致,所有新打开一个窗口。问题就来了,admin注销之后,权限管理的窗口没有关闭。其他普通用户登录以后,仍然可以操作权限管理的窗口。

问题简化:admin注销的时候,或者main.html关闭的时候,打开的所有新窗口一起关闭。问题就解决了

直接看代码吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
<body onUnload="closeNews();"> <a href="#" onclick="openNew('http://www.baidu.com','nihao')">打开新窗口</a> 
<a href="#" onclick="logOut();">退出登录</a> 
</body> 
</html> 
<script> 
//用户记录所有打开的子窗口 
var win_Array = new Array(); 
var win_num = -1; 
//每次打开一个新窗口都记录下来 
function openNew(uri,param){ 
win_num = win_num+1; 
win_Array[win_num] = window.open(uri); 
} 
//用户注销的时候,执行关闭方法。body添加onUnload = "closeNews();" 当main窗口关闭时候,所有的子窗口关闭 
function closeNews(){ 
//关闭权限管理 
if(win_Array.length > 0){ 
for(var i = 0;i <= win_Array.length;i++){ 
var win_one = win_Array[i]; 
if(win_one != undefined){ 
win_one.close(); 
} 
} 
} 
} 
function logOut(){ 
//关闭子窗口 
closeNews(); 
//退出登录 
} 
</script>

说明一下:

<body onUnload="closeNews();">在body上添加onUnload事件很重要。即:当窗口关闭以后,执行关闭所有子窗口的方法。

测试:在web项目中,ie8,ie10,火狐,chrome,opera都没有问题。

一旦不放倒wen容器中,只是静态的 main.html页面的时候,ie有问题,因为静态的时候,ie的window.open()居然是打开新页面,不是打开新标签。所有关闭窗口的方法不再有效。

时间有限,还没有花精力去细究,还望知道为什么的js技术大神 可以指导一下。再次致谢。

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
JS截取url中问号后面参数的值信息
Apr 29 #Javascript
javascript类型转换示例
Apr 29 #Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 #Javascript
javascript中使用正则计算中文长度的例子
Apr 29 #Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 #Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 #Javascript
javascript的创建多行字符串的7种方法
Apr 29 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python输入多行字符串的方法总结
2019/07/02 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
大学生自我鉴定
2013/12/16 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
办公用品质量保证书
2015/05/11 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电