函数window.open实现关闭所有的子窗口


Posted in Javascript onAugust 03, 2015

此文介绍了如何用window.open方法打开一个子窗口,当我们要关闭主窗口时,这时候所有的子窗口也会跟着关闭。下面有我的实现思路和代码,分享给大家。

实现思路:
1.打开子窗口函数window.open(url,winName)的第二个参数winName可以唯一标识打开的窗口。因此关闭子窗口只需要使用winName.close()函数即可。
2.一个页面可能有多个子窗口。因此需要一个数组存储所有子窗口对象。关闭时,遍历数组即可。
3.子窗口还可以再打开子窗口。无限循环下去。因此需要判断。
此需求可以通过两个方法实现。

调用子窗口的关闭函数。
此方法易于理解,但是实际实现过程中发现浏览器的关闭事件并没有。且需要是按钮点击关闭还是快捷键关闭,稍微麻烦一些、递归关闭子窗口
此方法实现简单,缺点就是所有的窗口存储子窗口的对象数组需同名

下面是使用递归关闭子窗口及子窗口的子窗口方法

function closeSonWindow(win){
  for(var index=0;index<win.length;index++){
    //如果窗口已关闭
    if(win[index].closed){
      continue;
    }
    //如果窗口没有可以打开的子窗口
    if(typeof(win[index].openedWindow)=="undefined"){
      win[index].close();
      continue;
    }
    if(win[index].openedWindow.length==0){
      win[index].close();
    }else{
      closeSonWindow(win[index].openedWindow);
      win[index].close();
    }
  }
}

以上就是本文的全部叙述,希望对大家有所帮助。

Javascript 相关文章推荐
Stop SQL Server
Jun 21 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
百度地图api如何使用
Aug 03 #Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 #Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 #Javascript
javascript常见数据验证插件大全
Aug 03 #Javascript
javascript自定义in_array()函数实现方法
Aug 03 #Javascript
JavaScript简单修改窗口大小的方法
Aug 03 #Javascript
javascript实现随机读取数组的方法
Aug 03 #Javascript
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
PHP has encountered an Access Violation
2007/01/15 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
神经网络理论基础及Python实现详解
2017/12/15 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
详解python的变量缓存机制
2021/01/24 Python
国贸专业的职业规划范文
2014/01/23 职场文书
服装促销活动方案
2014/02/23 职场文书
校园标语大全
2014/06/19 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
教师见习报告范文
2014/11/03 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
python装饰器代码解析
2022/03/23 Python
python中filter,map,reduce的作用
2022/06/10 Python