当主页面关闭时关闭所有子窗口(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 | 窗口被激活后是否可以浮在其它窗口之上
open新页面以后 提交本页面,刷新主页面并关闭本页面的方法