当主页面关闭时关闭所有子窗口(Close all the child windows on unload of main page)
摘要:
我们常常会使用window.open的便利来实现很多常用的web功能。
在应用中,我们能够用window.opener从子页面访问并操作父页面,但如果想通过父页面管理子页面,则需要在父页面里留下存根
(因为每个子页面只有一个父页面,每个父页面却可以有多个子页面)
本例使用数组来贮存一个父页面中的所有子页面,并可对其进行操作:
Demo:当父页面关闭时关闭其所有子页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
<!--
var windowArray = new Array();
function openWindow(tabValue, selValue, colValue)
{
var functionReturn = true;
try
{
var windowUrl = 'Default.aspx?TAB=' + tabValue + '&SEL=' + selValue + '&COL=' + colValue;
var windowId = 'Hlink' + new Date().getTime();
var windowLeft = (screen.width) ? (screen.width-600)/2 : 100;
var windowTop = (screen.height) ? (screen.height-500)/2 : 100;
var windowFeatures =
'width=' + 600 + ',height=' + 500 + ',top=' + windowTop + ',left=' + windowLeft +
',scrollbars=auto,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
var windowRef = window.open(windowUrl, windowId, windowFeatures);
windowArray[windowArray.length] = windowRef;
}
catch(ex)
{
alert(ex.message);
functionReturn = false;
}
return functionReturn;
}
function closeAllWindows()
{
for (var i=windowArray.length-1; i>=0; i--)
{
if ( windowArray.length <= 0 )
break;
var windowRef = windowArray[i];
if ( (windowRef != null) && (windowRef.closed == false) )
{
windowRef.close();
}
windowArray.pop();
}
}
function Button1_onclick() {
openWindow('test','test','test');
}
function Button2_onclick() {
closeAllWindows();
}
// -->
</script>
</head>
<body>
<p>
<input id="Button2" type="button" value="close all child" onclick="return Button2_onclick()" />
<br />
<input id="Button1" type="button" value="open a child" onclick="return Button1_onclick()" /></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
<!--
var windowArray = new Array();
function openWindow(tabValue, selValue, colValue)
{
var functionReturn = true;
try
{
var windowUrl = 'Default.aspx?TAB=' + tabValue + '&SEL=' + selValue + '&COL=' + colValue;
var windowId = 'Hlink' + new Date().getTime();
var windowLeft = (screen.width) ? (screen.width-600)/2 : 100;
var windowTop = (screen.height) ? (screen.height-500)/2 : 100;
var windowFeatures =
'width=' + 600 + ',height=' + 500 + ',top=' + windowTop + ',left=' + windowLeft +
',scrollbars=auto,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
var windowRef = window.open(windowUrl, windowId, windowFeatures);
windowArray[windowArray.length] = windowRef;
}
catch(ex)
{
alert(ex.message);
functionReturn = false;
}
return functionReturn;
}
function closeAllWindows()
{
for (var i=windowArray.length-1; i>=0; i--)
{
if ( windowArray.length <= 0 )
break;
var windowRef = windowArray[i];
if ( (windowRef != null) && (windowRef.closed == false) )
{
windowRef.close();
}
windowArray.pop();
}
}
function Button1_onclick() {
openWindow('test','test','test');
}
function Button2_onclick() {
closeAllWindows();
}
// -->
</script>
</head>
<body>
<p>
<input id="Button2" type="button" value="close all child" onclick="return Button2_onclick()" />
<br />
<input id="Button1" type="button" value="open a child" onclick="return Button1_onclick()" /></p>
</body>
</html>
结束语:
关于window.open的用法,下面转载了博友阿君的文章,供大家参考:
window.open()
支持环境 JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
语法 window.open(pageURL,name,parameters)
pageURL 子窗口路径
name 子窗口句柄
parameters 窗口参数(各参数用逗号分隔)
参数 | 取值范 | 说明
|
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没有菜单栏的窗口中设置安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否可以浮在其它窗口之上
支持环境 JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
语法 window.open(pageURL,name,parameters)
pageURL 子窗口路径
name 子窗口句柄
parameters 窗口参数(各参数用逗号分隔)
参数 | 取值范 | 说明
|
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上
depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见
height | pixel value | 窗口高度
hotkeys | yes/no | 在没有菜单栏的窗口中设置安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度
location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整
screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度
scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见
toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度
z-look | yes/no | 窗口被激活后是否可以浮在其它窗口之上

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述