函数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 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
javascript 自定义事件初探
Aug 21 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
浅谈原型对象的常用开发模式
Jul 22 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
PHP脚本的10个技巧(2)
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python 忽略warning的输出方法
2018/10/18 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
优秀员工自荐信范文
2013/10/05 职场文书
卖房协议书
2014/04/11 职场文书
优秀学生评语大全
2014/04/25 职场文书
企业标语口号
2014/06/10 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
教师节感谢信
2015/01/22 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书