函数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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
百度地图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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python计算已经过去多少个周末的方法
2015/07/25 Python
python生成ppt的方法
2018/06/07 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
二年级小学生评语
2014/04/21 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
专家推荐信范文
2015/03/26 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
食品卫生管理制度
2015/08/06 职场文书
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
Nginx配置根据url参数重定向
2022/04/11 Servers