Window对象是DOM对象模型的最顶层对象，代表了浏览器中用于显示文档内容的窗口，通过该对象可以访问DOM对象模型中的所有对象。Window对象和Javascript的内置对象一样，使用的时候无需手动创建，只要在HTML文档或者Web文档中使用了<Body>标签或者<frame>标签，系统就会自动创建一个Window对象。
16.1 Window对象的方法
16.1.1 alert方法：弹出一个警告对话框
【功能说明】使用Alert方法可以弹出一个含有制定内容的警告对话框，该对话框中还包含有一个叹号图标和一个“确定”按钮。
【基本语法】window.alert(message)
其中，message为任意有效的字符串表达式，该字符串指定了要在对话框上显示的内容。
【实例演示】下面的代码利用Alert方法弹出了一个含有提示信息的对话框。
<body>
<script>
var strmsg="Window对象的Alert方法测试！"；
window.alert(strmsg)；
</script>
</body>
运行这段代码可以看到图16.1所示的对话框。
图16.1 Alert方法演示
16.1.2 confirm：弹出一个选择对话框
【功能说明】该方法与Alert方法相似，弹出一个含有指定信息的对话框，但是该方法同Alert方法弹出的对话框也有不同之处，调用该方法弹出的对话框中含有一个问号图标和两个按钮，一个按钮的标题为“确定”，另一个按钮的标题为“取消”。
该方法的返回值为布尔类型，如果用户单击了“确定”按钮，则该方法返回True；否则返回False。
【基本语法】[blvar=]window.confirm(message)
参数说明如下。
□ message：可选项，字符串表达式，用于指定在弹出的对话框上显示的信息。
□ blvar：可选项，布尔类型，用于存储Confirm方法的返回值。
【实例演示】
<title>Confirm方法演示</title>
<body>
<form>
<input type="button" onClick="testConfirm()" value="关闭窗口">
</form>
<script>
function testConfirm()
{
var blvar;
blvar=confirm("你真的要关闭该窗口吗？");
if (blvar)
window.close();
else
window.alert("你取消了关闭窗口操作!") ;
}
</script>
</body>
运行这段代码后会在窗口中显示一个标题为“关闭窗口”的按钮，如果单击了该按钮就会弹出一个对话框（如图16.2所示），提示是否要关闭窗口。如果选择了“确定”，则系统会关闭当前窗口；否则关闭窗口的操作将不被执行。
图16.2 Confirm方法岩石
16.1.3 prompt方法：弹出一个供用户输入信息的对话框
【功能说明】该方法弹出对话框，该对话框中含有一个文本框并允许在其中输入信息。在调用该方法时可以设置显示在文本框中的默认值。该方法的返回值为在文本框中输入的内容，如果用户没有在文本框中输入任何内容，则该函数的返回值为null。
【基本语法】window.prompt(message,defaultvalue)
参数说明如下。
□ message：可选项，字符串表达式，用于指定显示在对话框上的提示信息。
□ defaultvalue：可选项，字符串或某一数字，用于指定显示在文本框中的默认值。
【实例演示】
<script>
var strmsg="请输入你的姓名：";
var strname="李小虎";
strname=window.prompt(strmsg,strname);
if(strname!="" )
{
if (window.confirm("你就是大名鼎鼎的"+strname+"吗？"))
window.alert("见到你真是太荣幸了！！")
}
</script>
运行这段代码弹出对话框，如图16.3所示，可以看到这个对话框中含有指定的提示信息和默认值。另外，这段代码中还用到了Confirm方法和Alert方法，这些代码的功能非常简单，不再赘述。
图16.3 prompt方法演示
16.1.4 blur方法：使Window失去焦点
【功能说明】调用该方法后当前Window窗口将失去焦点，此时，Window对象的onblur事件将被触发。如果同时打开了多个窗口，则调用该方法后可以使当前窗口成为底层窗口。
【基本语法】window.blur()
【实例演示】下面的代码演示了如何使用blur方法使Window失去焦点而触发onblur事件。
<title>blur方法演示</title>
<body onBlur="window.alert('窗口失去了焦点')">
<form>
<input type="button" value="失去焦点" onClick="window.blur()" />
</form>
</body>
运行这段代码后，会在窗口上出现一个标题为“失去焦点”的按钮，点击该按钮后，当前窗口将失去焦点，因此，窗口的onblur方法会被触发，弹出一个含有“窗口失去了焦点”字样的对话框，如图16.4所示。
图16.4 blur方法演示
16.1.5 setInterval方法：指定每隔多长时间执行指定代码一次
【功能说明】该方法以毫秒为单位设置一个时间间隔，此后，每个指定的时间间隔系统将执行指定的一次代码，直到窗口被关闭或者clearInterval方法被调用为止。该方法的返回值为一个整数，该整数为此次调用setInterval的标志，调用clearInterval方法时使用该整数作为参数可以取消定时执行代码的操作。
【基本语法】window.setInterval(expression,msec[arg1,arg2,…])
参数说明如下。
□ expression：必须项，可执行代码或函数名，用于指定要被反复执行的内容。
□ msec：必选项，常整型数据，以毫秒为单位指定时间间隔。
□ arg1、arg2：可选项，如果expression参数指定为某个函数名，可以使用这些选项指定函数参数。
注意：如果expression为函数名，则不需要把函数名用引号扩起来，如果为执行语句，则需要使用引号将这些代码扩起来。
【实例演示】下面的代码利用setInterval实现了倒计时的功能。
<title>setInterval方法演示</title>
<body>
<form>
你已经停留<input type="text" name="htime" size="4">秒，
还可以停留<input type="text" name="time" size="4">秒
</form>
<script>
var inittime=20;
var havetime=0;
//设置计时执行代码
window.setInterval(settime,1000);
//定义函数，实现时间加减功能
function settime()
{
inittime--;
havetime++;
if (inittime==0)
{
window.alert("该页面运行的停留时间已经结束，窗口即将关闭");
window.close();
}
document.forms[0].time.value=inittime;
document.forms[0].htime.value=havetime;
}
</script>
</body>
这段代码通过setInterval函数设置每隔一秒执行函数settime一次。该函数每执行一次，就将用户在该页面的停留时间加1，而将还可停留的时间减1。当可以停留的时间为0后，就弹出提示对话框，之后将关闭当前窗口。运行这段代码，效果如图16.5所示。
图16.5 setInterval函数演示
16.1.6 clearInterval方法：清除setInterval方法产生的作用效果
【功能说明】该方法用于清除setInterval函数的作用效果，该方法的参数为setInterval函数的返回值，以指定的setInterval方法的返回值作为参数，可以清除与之相对应的setInterval方法的作用效果。
【基本语法】window.clearInterval(intervalID)
其中，intervalID为setInterval函数的返回值。
【实例演示】下面的代码演示了如何利用clearInterval方法清除setInterval方法的作用效果。
<title>setInterval方法演示</title>
<body >
<form name="frm">
<input name="txt" border="0" size="0">
<input type="button" value="停止" onClick="window.clearInterval(intervalID)">
</form>
<script>
var intervalID
intervalID=window.setInterval(setSize,200)
function setSize()
{
document.frm.txt.size++;
}
</script>
</body>
运行这段代码，窗口中的文本框的长度将不断地增加，直到点击了“停止”按钮。代码中通过setInterval方法将文本框的长度每隔200毫秒增加一个单位，而单击“停止”按钮时，将调用clearInterval方法结束setInterval方法的作用效果，因此，文本框的长度不再增加。执行效果如图16.6所示。
图16.6 clearInterval方法演示
16.1.7 setTimeout方法：指定多长时间之后执行指定的代码
【功能说明】该方法同setInterval方法不同，setInterval方法是指定每隔一段时间后就执行指定的代码一次，因此，指定的代码是被反复执行的。而setTimeout方法则只在指定的时间间隔之后，只执行指定代码一次，当指定代码被执行后，setTimeout方法不再发挥作用。该方法的返回值为一个整数，该整数为此次调用setTimeout方法的标志。
【基本语法】window.setTimeout((expression,msec[arg1,arg2,…])
参数说明如下。
□ expression：必项，可执行代码或函数名，指定的内容在规定时间之后，被执行一次。
□ msec：必选项，常整型数据，以毫秒为单位指定时间间隔。
□ arg1、arg2：可选项，如果expression参数指定为某个函数名，可以使用这些选项指定函数参数。
【实例演示】下面的代码演示了setInterval方法和setTimeout方法的不同。
<title>setTimeout方法演示</title>
<body >
<form name="frm">
代码已执行了<input name="txt" value="25" size="3">秒
</form>
<script>
var timeLen=24;
window.setInterval("document.frm.txt.value=timeLen--",1000);
window.setTimeout("window.alert('已经过了5秒')",5*1000);
</script>
</body>
这段代码体现了setInterval方法和setTimeout方法的不同，setInterval方法每隔1秒就执行指定的代码一次，将指定的时间减去1秒，而setTimeout方法则只在5秒后执行一次。运行这段代码可以看到图16.7所示的页面效果。
图16.7 setTimeout方法演示
16.1.8 clearTimeout方法：清除setTimeout方法的作用效果
【功能说明】在setTimeout方法指定的时间间隔之前调用setTimeout方法可以取消setTimeout方法的作用效果。也就是说，如果在setTimeout指定的代码执行之前调用了learTimeout，则在规定的时间间隔到达以后，指定的代码将不会再被执行。
该方法的参数为setTimeout方法的返回值，如果多次使用setTimeout方法，则调用clearTimeout方法时某个setTimeout方法的返回值作为参数，可以清除指定setTimeout方法的作用效果。
【基本语法】clearTimeout(intervalID)
其中，intervalID为setTimeout函数的返回值。
16.1.9 close方法：关闭Window窗口
【功能说明】调用该方法后，系统会弹出一个对话框询问是否关闭窗口，如图16.8所示。点击“是”窗口将被关闭，点击“否”关闭操作将被取消。如果想直接关闭窗口，而不出现询问对话框，可以在调用close方法之前先设置window对象的opener属性为null。
【基本语法】window.close()
【实例演示】下面的代码演示了如何直接关闭浏览器窗口。
<form name="frm">
<input type="button" value="关闭窗口" onClick="closeWindow()">
</form>
<script>
function closeWindow()
{
window.opener=null;
window.close();
}
</script>
执行这段代码会在浏览器窗口上出现一个标题为“关闭窗口”的按钮，点击该按钮窗口将被直接关闭，而不弹出任何对话框。
图16.8 询问对话框
16.1.10 focus方法：使窗口获得焦点
【功能说明】调用该方法之后，window窗口将成为当前窗口。
【基本语法】window.focus()
16.1.11 moveBy方法：通过指定偏移量来移动窗口
【功能说明】该方法通过指定窗口左上角的坐标偏移量来移动窗口，即在现在坐标的基础上按指定的值改变窗口的位置。
【基本语法】window.moveBy(ix,iy)
参数说明如下。
□ ix：必选项，整数，窗口左上角横坐标的改变量。
□ iy：必选项，整数，窗口左上角纵坐标的改变量。
注意：这里采用的坐标系统为计算机的默认坐标系统，即屏幕左上角为坐标原点，向右为横坐标正方向，横坐标增加，向下为纵坐标正方向，纵坐标增加。
【实例演示】下面的代码演示了如何利用moveBy方法移动窗口。
<script>
var imoved=0;
var intervalID;
intervalID=window.setInterval(moveWindow,100);
function moveWindow()
{
//移动窗口
window.moveBy(1,1);
imoved++;
//如果与演示坐标的偏移量达到500则停止移动
if (imoved>=500)
window.clearInterval(intervalID);
}
</script>
这段代码运行后，每隔0.1秒就将窗口向右和向左分别移动1个像素，如果与原始坐标相比，移动的偏移量超过500，则停止移动窗口。
16.1.12 moveTo方法：移动窗口到指定的坐标
【功能说明】该方法可以将窗口的左上角移动到指定的坐标处，该方法与moveBy方法不同，该方法所指定的数值不是偏移量而是绝对坐标。
【基本语法】window.moveTo(xp,yp)
参数说明如下。
□ xp：必选项，整数，指定的窗口左上角的新的横坐标。
□ yp：必选项，整数，指定的窗口左上角的新的纵坐标。
【实例演示】下面的代码演示了如何使用moveTo方法移动窗口。
<script>
var imoved=0;
intervalID=window.setInterval(moveWindow,100);
function moveWindow()
{
var ipx,ipy;
//随机产生x y坐标
ipx=Math.round(Math.random()*800);
ipy=Math.round(Math.random()*800);
window.moveTo(ipx,ipy);
imoved++;
if (imoved>=50)
window.clearInterval(intervalID);
}
</script>
这段代码利用随机产生的横坐标和纵坐标来移动窗体，执行这段代码之后，窗口将在屏幕上不停的跳动，直到跳到次数达到50次为止。
16.1.13 open方法：打开一个新的窗口
【功能说明】该方法可以根据指定的属性打开一个新窗口，并可以在该窗口中显示指定URL中的内容。该方法的返回值为一个窗口对象，通过该对象可以访问和操作新打开的窗口。
【基本语法】window.open([sURL][,sName][, sFeatures])
参数说明如下。
□ sURL：可选项，字符串表达式，用于指定在新窗口中显示的内容，如果没有指定该项，则在窗口中显示的内容为空。
□ sName：可选项，字符串表达式，用于指定窗口的名称，另外该项也与HTML标签<Target>具有相同的作用相同，可以指定窗口的打开位置和类型。表16.1列出了发挥这种作用时sName的取值及意义说明。
表16.1 sName具有特殊意义的可用值及说明
|
值 |
说明 |
|
_blank |
sURL参数所指定的内容将被显示一个新的、没有名字的窗口中 |
|
_media |
sURL参数所指定的内容将被显示在HTML文档的媒体工具中，该选项仅在IE 6.0及更新版本中可用 |
|
_parent |
sURL参数所指定的内容将被显示在当前框架的父框架中，如果当前框架没有父框架，则该选型的作用与_self相同 |
|
_search |
sURL参数所指定的内容将被显示在IE的搜索面板中，该选项仅在IE 5.0及更新版本中可用 |
|
_self |
sURL参数所指定的内容将被显示在当前窗口中 |
|
_top |
sURL参数所指定的内容将取代任何将被加载的框架集，如果当前页面中没有定义任何框架则该选项的作用与_self参数相同 |
□ sFeatures：可选项，用于指定新窗口的属性，该选项可以是一个参数也可以是多个参数的组合。关于该参数的可用值及说明请参考表16.2。
表16.2 窗口属性的常用设置及说明
|
属性 |
说明 |
|
fullscreen |
指定窗口是否全屏显示，取yes表明全屏显示，取no不全屏显示 |
|
height |
以像素为单位指定窗口的高度 |
|
width |
以像素为单位指定窗口的宽度 |
|
left |
以像素为单位指定窗口距屏幕左边界的距离 |
|
top |
以像素为单位指定窗口距屏幕上边界的距离 |
|
location |
指定窗口中是否显示地址栏，取yes表明显示地址栏，取no不显示地址栏 |
|
resizable |
指定窗口是否可改变大小，取yes表明窗口可以改变大小，取no则不可以改变 |
|
scrollbars |
指定是否在窗口中显示滚动条，取yes显示 |
|
status |
指定是否在窗口中显示状态栏，取yes显示 |
|
titlebar |
指定是否在窗口中显示标题栏，取yes显示 |
|
toolbar |
指定是否在窗口中显示工具栏，取yes显示 |
【实例演示】
<script>
//在新窗口中打开指定页面
function openNew()
{
window.open("http://www.baidu.com","_blank");
}
//在当前窗口中打开指定页面
function openOnSelf()
{
window.open("http://www.baidu.com","_self");
}
//打开新窗口并输入一些信息
function openMsg()
{
var newWin;
newWin=window.open("","公告","height=200,width=200,toolbar=no,
menubar=no,location=no,top=200,left=200");
newWin.document.write("<h4 align='center'>公告</h4>");
newWin.document.write("这是一个open方法测试");
}
</script>
<form>
<input type="button" onClick="openOnSelf()" value="在当前窗口打开百度" /><br>
<input type="button" onClick="openNew()" value="在新窗口中打开百度"><br><center>
<input type="button" onClick="openMsg()" value="弹出公告"></center>
</form>
这段代码中定义了3个函数，分别实现了在新窗口中打开指定页面、在当前窗口中打开指定页面和打开新窗口并输入一些指定信息的功能。运行这段代码可以看到图16.9所示的效果。
单击该页面中的第一个按钮，可以将当前窗口中的内容替换为百度首页；单击第二个按钮会在新的窗口中打开百度首页；点击第三个按钮可以弹出图16.10所示的窗口。
图16.9 open方法演示图 图16.10 弹出的对话框窗口
16.1.14 navigate方法：在当前窗口中加载指定页面
【功能说明】该方法可以把指定的页面加载到当前窗口中。
【基本语法】window.navigate(sURL)
其中，sURL为要加载到当前窗口中的页面的地址。
16.1.15 resizeBy方法：通过指定窗口右下角坐标的偏移量来缩放窗口
【功能说明】该方法可以通过指定窗口右下角的横坐标和纵坐标的偏移量来移动窗口右下角的位置，而窗口左上角的位置不变，因此起到了改变窗口大小的作用。
【基本语法】window.resizeBy(ix,iy)
语法说明如下。
□ ix：必选项，整型数据，用于指定窗口右下角横坐标的偏移量。
□ iy：必选项，整型数据，用于指定窗口右下角的纵坐标的偏移量。
【实例演示】
<script>
var iresized=0;
var ixy=-1;
window.setInterval(resizeWindow,10);
function resizeWindow()
{
window.resizeBy(ixy,ixy);
iresized++;
if (iresized>500)
{
ixy*=-1;
iresized=0;
}
}
</script>
这段代码每隔10毫秒就将窗口的大小增加或减小1个像素，如果窗口的改变超过500个像素，则窗口向相反的方向改变。即：如果窗口增加了500个像素，则窗口开始减小；如果窗口减小了500个像素，则窗口开始增加。运行这段代码窗口会先减小再增加，如此反复不止。
16.1.16 resizeTo方法：通过指定窗口右下角的新坐标来改变窗口的大小
【功能说明】该方法同resizeBy方法类似，也是通过改变窗口右下角的位置来改变窗口的大。不同的是，resizeBy指定的是窗口右下角坐标的偏移量，而resizeTo方法指定的则是窗口右下角的新的坐标，即窗口右下角直接移动到指定的坐标上。
【基本语法】window.resizeTo(ix,iy)
参数说明如下。
□ ix：必选项，整型数据，用于指定窗口右下角的新的横坐标。
□ iy：必选项，整型数据，用于指定窗口右下角的新的纵坐标。
【实例演示】下面的代码利用rsizeTo方法把窗口的大小调整到了屏幕大小。
<form>
<input type="button" onClick="openNewWindow()" value="开始">
</form>
<script>
var objwin;
var ih,iw;
var ihok,iwok;
var intervalID;
function openNewWindow()
{
ih=iw=100;
ihok=iwok=0;
//弹出新的对话框
objwin=window.open("rsizeTo.html","resizeTo方法测试","height=100,width=100,
top=0,left=0,resizable=yes");
//改变窗口的大小，直到窗口达到屏幕大小
intervalID=objwin.setInterval(resizeWindow,10);
}
function resizeWindow()
{
ih+=5;
iw+=5;
if(ih>screen.height)
{
ih=screen.height;
ihok=1;
}
if(iw>screen.width)
{
iw=screen.width;
iwok=1;
}
//如果iwok+ihok=2则说明窗口的长和宽均达到屏幕大小
if(iwok+ihok>=2)
objwin.clearInterval(intervalID);
else
objwin.resizeTo(iw,ih);
}
</script>
运行这段代码后，会在窗口中出现一个“开始”按钮，单击该按钮，弹出一个长和宽均为100像素的窗口，然后，窗口的长和宽开始每隔10毫秒增加5个像素，直到长和宽均达到屏幕大小为止。
16.1.17 scrollTo方法：滚动窗口中的内容到新的位置
【功能说明】该方法可以按给定的横坐标和纵坐标的偏移量来滚动显示窗口中的内容。
【基本语法】window.scrollTo(ix,iy)
参数说明如下。
□ ix：必选项，整型数据，以像素为单位指定窗口横坐标的滚动偏移量。
□ iy：必选项，整型数据，以像素为单位指定窗口纵坐标的滚动偏移量。
注意：只有当窗口中的内容无法在窗口中全部显示时，即窗口中出现滚动条时，窗口才可以滚动，否则调用scrollTo方法将得不到任何效果。
【实例演示】下面的代码实现了双击自动滚屏的效果。
<form onDblClick="toScroll()">
<script>
var i,intervalID;
var iw=0;
var ih=1;
document.write("<h4>双击开始滚屏</h4>");
for(i=1;i<=100;i++)
{
document.write(i);
document.write("<br>");
}
function toScroll()
{
intervalID=window.setInterval(scrollWindow,10);
}
function scrollWindow()
{
ih++;
window.scroll(iw,ih);
}
</script>
</form>
这段代码运行时，首先在窗口上输出了100行数字，当用户双击窗口中的内容时，程序调用toScroll函数开始滚屏，直到窗口最下面的内容显示出来为止。
16.1.18 scrollBy方法：按给定的偏移量来滚动窗口中的内容
【功能说明】该方法和scrollTo方法类似，可以实现窗口的滚动显示。不同的是，scrollTo方法所指定的参数是窗口要滚动到的新位置，而scrollBy所指定的参数则是在现有的基础上所有滚动的新的距离，即scrollTo方法指定的滚动距离是滚动距离的总量，而scrollBy方法指定的滚动距离是在现有滚动距离基础上的新增量。
【基本语法】window.scrollBy(ix,iy)
参数说明如下。
□ ix：必选项，整型数据，用于指定窗口横坐标的滚动距离增量。
□ iy：必选项，整型数据，用于指定窗口纵坐标的滚动距离增量。
注意：只有当窗口中的内容无法在窗口中全部显示时，即窗口中出现滚动条时，窗口才可以滚动，否则调用scrollTo方法将得不到任何效果。
16.1.19 showModalDialog方法：打开一个模式对话框以显示指定内容
【功能说明】模式对话框是相对非模式对话框来说的，打开一个模式对话框后，该对话框一直具有焦点直到该对话框被关闭，在此期间所有的操作只能针对该模式对话框进行，其他窗口无法获得焦点。showModalDialog方法可以根据指定的属性打开一个模式对话框并显示指定的内容，另外还可以通过该方法的参数给打开的对话框传送数据。
该方法的返回值为该对话框窗口returnValue属性的值。
【基本语法】window.showModalDialog(sURL[,vArguments][,sFeatures])
参数说明如下。
□ sURL：必选项，字符串表达式，用于指定在打开的模式对话框中显示的内容。
□ vArgument：可选项，任意类型的数据，这些数据将被传递给打开的对话框，在对话框中可以使用dialogArguments属性来获取传递给对话框的数据。
□ sFeatures：可选项，字符串表达式，用于指定所打开的对话框的属性。关于该选项的部分常用设置即说明请参考表16.3。
表16.3 sFeatures选项的可用值及说明
|
参数 |
说明 |
|
dialogHeight |
整型或浮点型数据，用于指定打开的模式对话框的高度 |
|
dialogWidth |
整型或浮点型数据，用于指定打开的模式对话框的宽度 |
|
dialogLeft |
整型或浮点型数据，用于指定打开的模式对话框距屏幕左边界的距离 |
|
dialogTop |
整型或浮点型数据，用于指定打开的模式对话框距屏幕上边界的距离 |
|
center |
用于指定对话框是否显示在屏幕中间，默认为居中 |
|
edge |
用于指定对话框的边框的类型，可用值有两个，sunken和raised，默认为raised |
|
help |
用于指定是否在对话框窗口中显示与上下问相关的帮助图标，默认为显示 |
|
resizable |
用于指定窗口大小是否可调，默认为不可调 |
|
scroll |
用于指定是否在窗口中显示滚动条，默认为显示 |
|
status |
用于指定是否在窗口中显示状态栏 |
说明：dialogHeight、dialogWidth、dialogLeft、dialogTop的值可以采用cm，mm，in，pt， pc或者px作为单位，而center，help，resizable，scroll和status的值为yes或no，表16.3中的选项可以组合使用，各选项之间通过“;”隔开。
【实例演示】下面的例子利用openModalDialog方法打开了一个模式对话框并在其中输出了一些内容。首先创建一个HTML文件并在其中输入如下代码。
<title>
showModalDialog方法测试
</title>
<body>
<script>
var sFeatures;
var para;
//设置传递给对话框的参数
para="<br>this is a test<br>openModalDialog方法测试" ;
para=para+"<br>在关闭该窗口以前，其他窗口无法获得焦点";
sFeatures="center=yes;edge=raised;status=yes;";
sFeatures=sFeatures+"dialogHeight=250 px;dialogWidth=250 px";
window.showModalDialog("dialog.html",para,sFeatures);
</script>
</body>
然后再创建一个名为“dialog.html”的HTML文件并在其中输入如下代码。
<p>openModalDialog方法测试。</p>
<p> 获取的参数为：
<script>
document.write(window.dialogArguments);
</script>
</p>
运行第一段代码，窗口中弹出一个对话框，如图16.11所示。
图16.11 showModalDialog方法演示
可以看到指定的数据成功的传递给了打开的模式对话框，而且在对话框中可以很容易地获取并显示这些数据。
16.1.20 showModalessDialog方法：打开一个非模式对话框并显示指定内容
【功能说明】非模式对话框与模式对话框不同，在打开非模式对话框时还可以对其他窗口进行操作。showModalessDialog方法的作用就是创建一个非模式对话框并在其中显示指定的页面内容。
该方法的返回值与showModalDialog方法也不同，该方法的返回值为打开的窗口对象。
【基本语法】window.showModalessDialog(sURL[,vArguments][,sFeatures])
参数说明如下。
□ sURL：必选项，字符串表达式，用于指定在打开的非模式对话框中显示的内容。
□ vArgument：可选项，任意类型的数据，这些数据将被传递给打开的对话框，在对话框中可以使用dialogArguments属性来获取传递给对话框的数据。
□ sFeatures：可选项，字符串表达式，用于指定所打开的对话框的属性。关于该选项的部分常用设置即说明请参考表16.3。
【实例演示】
<script>
var sFeatures;
var para;
var newWin;
para="showModalessDialog方法演示" ;
para+="<br>打开该窗口后还可操作其他窗口<br>";
para+="<center><input type='button' value='关闭该窗口' onclick='window.opener=null;
window.close();'</center>"
sFeatures="center=yes;edge=raised;status=yes;resizable=yes;";
sFeatures=sFeatures+"dialogHeight=250 px;dialogWidth=250 px";
newWin=window.showModelessDialog("dialog.html","",sFeatures);
newWin.document.write(para);
</script>
这段代码通过showModalessDialog方法打开了一个非模式对话框，然后通过对该对话框窗口的引用向对话框中写入了一些内容。运行这段代码可以看到图16.12所示的效果。
图16.12 showModalessDialog方法演示
16.2 Window对象的属性
16.2.1 closed属性：判断引用的窗口是否已经关闭
【功能说明】该属性为只读属性，其返回值为布尔子类型，如果引用的窗口已经关闭，则该属性返回True，否则，返回False。
【基本语法】window.closed
【实例演示】下面的代码计算了弹出窗口的存在时间。
<script>
var newWin;
var intervalID;
var timeLen=0;
function getTimeLen()
{
//如果窗口已经关闭
if (newWin.closed)
{
window.clearInterval(intervalID);
window.alert("窗口打开了"+timeLen+"秒");
}
else
timeLen++;
}
function openNew()
{
newWin=window.open("","公告","height=200,width=200,toolbar=no,
menubar=no,status=yes,location=no,top=200,left=200");
newWin.document.write("<h4 align='center'>公告</h4>");
newWin.document.write("这是一个closed属性测试");
newWin.document.write("<center><input type='button' value='关闭窗口' onclick='window.opner=null;
window.close();'</center>");
intervalID=window.setInterval(getTimeLen,1000);
}
</script>
<form><input type="button" onclick="openNew()" value="打开窗口"></form>
这段代码利用setInterval方法每隔一秒钟调用closed属性判断一下窗口是否已经关闭。如果窗口已经关闭，就弹出对话框显示窗口一共存在了多长时间（如图16.13所示）；否则就将变量timeLen加1，以记录窗口存在的时间。
图16.13 closed属性演示
16.2.2 defaultStatus属性：设置或返回窗口的缺省状态信息
【功能说明】该属性为可读写属性，利用该属性可以设置或读取浏览器窗口的默认状态信息。如果没有设置该属性，则打开一个窗口后，其默认状态信息为“完成”。
【基本语法】wondow.defaultStatus[=smessage]
其中，smessage就是要设置的状态信息。
【实例演示】下面的代码演示了如何使用defaultStatus属性设置窗口的默认状态信息。
<script>
window.defaultStatus="defaultStatus属性测试"
</script>
运行这段代码，效果如图16.14所示。从图中可以看到状态栏上所设置的信息。
图16.14 defaultStatus属性演示
16.2.3 dialogArguments属性：获取传递给模式对话框的数据
【功能说明】在使用showModalDialog方法创建模式对话框时，可以使用该方法的第二个参数给打开的模式对话框传递数据。在模式对话框所显示的页面中可以模式对话框的dialogArguments属性来获取传递给对话框的数据。
【基本语法】[data=]window. dialogArguments
其中，data可以为任意类型的变量，用来接收dialogArguments属性的值。关于该属性的演示实例请参考showModalDialog方法，在此不再赘述。
16.2.4 dialogHeight、dialogWidth属性：设置或返回模式对话框的高度、宽度
【功能说明】利用这两个属性可以设置或读取所打开的模式对话框的高度和宽度。设置时可采用cm，mm，in，pt，pc或者 px为单位，默认为px。
【基本语法】window.dialogHeight[=nheight] window.dialogWidth[=nwidth]
其中，nheight和nwidth均为整型数据，用于设置对话框的高度和宽度。
注意：只有使用showModalDialog和showModalessDialog方法打开的窗口才可以使用这两个属性。
dialogHeight属性和dialogWidth属性一般在showModalDialog和showModalessDialog方法的第三个参数（sFeatures）中使用，具体的演示实例请参考第16.19小节和第16.20小节的演示实例，在此不再赘述。
16.2.5 dialogLeft、dialogTop属性：设置或返回对话框的位置
【功能说明】dialogLeft属性用于设置对话框左侧距屏幕左边界的距离，也就是对话框左上角的横坐标。dialogTop属性用于设置对话框上侧距屏幕上边界的距离，也就是对话框左上角的纵坐标。这两个属性和dialogHeight属性与dialogWidth属性相同，只能作用于使用showModalDialog或者showModalessDialog方法打开的模式对话框或非模式对话框。
【基本语法】window.dialogLeft[=nleft] window.dialogTop[=ntop]
其中，nleft和ntop均为整型数据，可用的单位与dialogHeight属性相同，默认为px。
16.2.6 opener属性：设置返回对打开当前窗口的副窗口的引用
【功能说明】如果当前窗口是其他窗口使用open方法打开的窗口，那么在当前窗口中使用opener属性可以返回对当前窗口的创建者的引用，因此，通过opener属性可以访问创建当前窗口的副窗口中的数据。
【基本语法】[objWindow=]window.opener
其中，objWindow为一个widow对象，是对打开当前窗口的副窗口对象的引用。下面的例子演示了opener属性的作用和用法。首先创建一个HTML文件并在其中输入如下代码。
【实例演示】
<script>
var str="width=200,height=200,toolbar=no,status=no";
</script>
<form action="search.html">
姓名<input type="text" size="10" name="name"><br>
年龄<input type="text" size="4" name="age"><br>
住址<input type="text" name="address"><br>
<input type="button" value="提交" onClick="window.open('opener.html','opener属性演示',str)">
</form>
然后再创建一个名为“search.html”的文件并在其中输入如下代码。
【实例演示】
<script>
document.write("请确认您提交的信息:<br>");
with(window.opener.document.forms[0])
{
window.document.write("<li>姓名:"+name.value+"</li>");
window.document.write("<li>年龄:"+age.value+"</li>");
window.document.write("<li>地址:"+address.value+"</li>");
window.document.write("<input type='button' value='关闭窗口' onclick='closeWindow()'>");
}
function closeWindow()
{
window.opener=null;
window.close();
}
</script>
这个实例中第一段代码创建了一个HTML表单，在其中输入数据（如图16.15所示）并单击“提交”按钮，就会弹出一个新窗口以显示用户输入的数据，如图16.16所示。在弹出的窗口中使用opener属性来引用原窗口而读取到原窗口表单中的数据。
图16.15 在表单中输入数据 图16.16 弹出窗口
从本例中可以看到，通过opener属性可以在打开的窗口中方便地访问打开该窗口的副窗口中的数据。如果存在多级打开关系，比如：在窗口A中打开了窗口B，而在窗口B中又打开了窗口C，那么就可以使用C.opener.opener来引用窗口A，并可以访问窗口A中的数据。
16.3 Window对象的子对象
Window对象是DOM对象模型中的顶层对象，其他对象都是Window的子对象，本节只介绍几个简单的子对象，其他复杂的对象将单独作为一章来介绍。
16.3.1 screen对象：获取计算机屏幕的一些属性
screen对象有很多属性，利用这些可以获得关于计算机屏幕的一些信息，比如长度、宽度等，这里只介绍几个比较常用的属性。
1．availHeight属性
【功能说明】该属性用于获取计算机屏幕工作区域的高度，所谓的工作区域就是指计算机屏幕上除了工具条以外的其他区域，利用availHeight属性可以获取之一区域的高度。
【基本语法】[iheight=]screen.availHeight
其中，iheight为整型变量，单位为px（像素），用于接收该属性的值。
2．availWidth属性
【功能说明】该属性以像素为单位返回计算机屏幕工作区域的宽度。该属性和availHeight属性一样都是只读属性，不能改变它们的值。
【基本语法】[iwidth=]screen.availWidth
其中，iwidth为整型变量，用于接收availWidth属性的返回值。下面的代码演示了如何利用availHeight属性和availWidth属性获取计算机屏幕工作区域的尺寸。
【实例演示】
<script>
var iheight=100;
var iwidth=100;
var intervalID;
//移动窗口至计算机屏幕的右上角并调整窗口大小
window.moveTo(0,0);
window.resizeTo(iwidth,iheight);
intervalID=window.setInterval(loadWindow,1);
function loadWindow()
{
/* 首先增加窗口的高度至屏幕工作区域高度
然后再增加窗口的宽度至屏幕工作区域的宽度
窗口的高度和宽度都达到屏幕工作区域的尺寸时，停止*/
if(iheight<screen.availHeight)
iheight+=3;
else if(iwidth<screen.availWidth)
iwidth+=3;
else
window.clearInterval(intervalID);
window.resizeTo(iwidth,iheight);
}
</script>
这段代码利用screen对象的availHeight属性和availWidth属性获取了计算机屏幕工作区域的尺寸，然后逐渐增加窗口的高度至计算机屏幕工作区域的高度，再增加窗口的宽度至计算机屏幕工作区域的宽度。
3．height、width属性
【功能说明】这两个属性以像素为单位返回了计算屏幕的垂直分辨率和水平分辨率，因此，这两个属性的返回值均为整型数据。
【基本语法】screen.height screen.width
【实例演示】
<script>
var iheight;
var iwidth;
iheight=screen.height;
iwidth=screen.width;
window.document.write("计算机的当前分辨率为:"+iheight+"×"+iwidth);
</script>
这段代码利用height属性和width属性获取了当前计算机的分辨率。运行这段代码后，可以看到效果如图16.17所示。
图16.17 height和width属性演示
16.3.2 location对象：设置或获取当前URL的信息
使用location对象可以设置或返回URL中的一些信息，一个完整的URL地址的格式为：
协议://主机:端口/路径名称#hash标识?搜索条件
其中，协议是URL的起始部分，用于指定该URL地址所采用的通信协议，比如http、ftp等；主机是指该URL所对应的服务器的名称；端口用于指定服务器用于通信的端口号，与主机名之间使用冒号隔开；路径名称是指该URL所对应的网页文件在服务器上的虚拟路径；如果页面中含有锚点连接，可以使用hash标志指定页面中的锚点标志，该标志以“#”开头；搜索条件是指URL中所含有的查询条件，该查询条件以“?”开头，以“变量名称=值”的形式出现，多个查询条件之间使用连接符“&”连接。比如：http://upc.edu.cn:8080/wwwroot/ index.html#topicID?id=3876。
利用location对象可以方便地设置或获取URL中的各种信息，本节将详细介绍location对象的一些常用属性和方法。
1．hash属性
【功能说明】设置或获取URL中的锚点名称，如果Web页面中使用的锚点连接，通过设置location对象的hash属性可以方便的跳转到页面中的不同部分。
【基本语法】location.hash
下面的代码演示了如何在网页中使用location对象的hash标志快速定位页面中的 内容。
【实例演示】
<script>
function getAnchor(str)
{
window.location.hash=str;
}
</script>
<body>
//创建锚点链接，快速定位网页内容
<a href="javascript:getAnchor('jueju');">杜甫 绝句</a>
<a href="javascript:getAnchor('yijianmei');">李清照 一剪梅</a>
<a href="javascript:getAnchor('hanghelou');">崔颢 黄鹤楼</a>
//下面定义了3个锚点
<a name="jueju"><center>绝句</center>
<!--古诗内容省略，见源代码-->
</a><br><br><br><br><br>
<a name="yijianmei"><center>一剪梅</center>
<!--古诗内容省略，见源代码-->
</a><br><br><br><br><br>
<a name="hanghelou"><center>黄鹤楼</center>
<!--古诗内容省略，见源代码-->
</a>
</body>
这段代码在一个网页文件中创建了3个锚点链接，单击其中任一个链接，程序就会调用getAnchor函数来设置location对象的hash属性为相应的值，以使页面滚动到指定的内容上。运行这段代码，将窗口缩小并单击链接“崔颢 黄鹤楼”则可以看到图16.18所示的效果。
图16.18 hash属性演示
2．host属性
【功能说明】设置或返回URL地址中主机的名称和端口号。如果URL中没有显示的指定端口号，则host属性的返回值和hostname属性的返回值相同。
【基本语法】location.host
3．hostname属性
【功能说明】设置或返回location对象或URL地址中的主机名称或者主机的IP地址。对大多Web站点服务器来说，该属性的返回值还包含域名和3w标志。
【基本语法】location.hostname
4．port属性
【功能说明】设置或返回URL地址中的服务器端口号。如果URL中没有指定通信端口号，则该属性的返回值为空字符串。
【基本语法】location.port
5．pathname属性
【功能说明】设置或返回URL所对应的网页文件的虚拟路径，其中包括网页文件的文件名。
【基本语法】location.pathname
6．protocol属性
【功能说明】设置或返回URl中所包含的通信协议，其中包括“:”，如http:、ftp:等。
【基本语法】location.protocol
【实例演示】下面的代码演示了如何利用上面几个属性获取URL中的相应信息。
<table align="center" border="1" bordercolor="#009900" style="border-collapse:collapse">
<script>
with(document)
{
writeTable("属性","属性值");
writeTable("URL",location.href);
writeTable("host",location.host);
writeTable("hostname",location.hostname);
writeTable("port",location.port);
writeTable("pathname",location.pathname);
writeTable("protocol",location.protocol);
}
function writeTable(str1,str2)
{
with (document)
{
write("<tr>");
write("<td>");write(str1);write("</td>");
write("<td>");write(str2);write("</td>");
write("</tr>");
}
}
</script>
</table>
这段代码通过自定义函数以表格的形式输出了location对象的部分属性和属性值，运行这段代码可以看到图16.19所示的页面效果。
7．href属性
【功能说明】该属性为location对象的默认属性，是location对象中最常用的属性。利用该属性可以设置或返回整个URl字符串，通过重新设置location对象的URL地址，可以使窗口中的内容跳转到指定的Web页面。
【基本语法】location.href[=surl]
其中，surl是要跳转到的URL地址。
注意：href属性返回的URL地址是经过编码以后的字符串，比如空格被显示为%20，要想得到编码前的URL字符串信息，可以使用unescape()函数进行处理。
【实例演示】下面的代码演示了如何通过设置location对象的href属性来跳转到指定的页面。
<body>
选择页面
<select onChange="window.location.href=this.options[this.selectedIndex].value">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
<option value="http://www.hao123.com">hao123</option>
</select>
</body>
运行这段代码可以看到图16.20所示的页面，从列表框中选择一个页面，程序就会加载相应的页面到当前窗口中。
图16.19 location对象属性的使用演示 图16.20 href属性演示
8．search属性
【功能说明】设置或返回URL地址中的查询信息，即URL中的问号及问号以后的信息。如果HTML表单中的数据采用get方法进行传输（默认），则表单中的数据信息将以查询条件的形式传送给处理页面。因此可以使用location对象的search属性来获取这些数据并进行处理。
【基本语法】[sSearch=]location.search
其中，sSearch为返回的查询条件字符串。
【实例演示】下面的例子演示了如何获取并处理URL中的查询字符串。首先创建一个HTML表单，主要代码如下。
<form action="search.html">
姓名<input type="text" size="10" name="name"><br>
年龄<input type="text" size="4" name="age"><br>
住址<input type="text" name="address"><br>
<input type="submit" value="提交">
</form>
这个HTML表单中指定了使用“search.html”来处理表单中的数据，该文件中的主要代码如下所示。
<script>
var arrSearch=new Array();
//调用函数处理查询条件信息
analysisSearch();
writeSearchInfor();
//分析location.search属性的值，从中分离出变量和值
function analysisSearch()
{
var sSearch=unescape(location.search);
sSearch=sSearch.substr(1);
arrtemp=sSearch.split("&");
for(var i=0;i<arrtemp.length;i++)
{
temp=arrtemp[i].split("=");
arrSearch[temp[0]]=temp[1];
}
}
//输出分析结果
function writeSearchInfor()
{
document.write(arrSearch["name"]+"你好,下面是您的个人信息：<br>");
for(var sitem in arrSearch)
{
var str;
str="<li>"+sitem+":"+arrSearch[sitem]+"</li>"
document.write(str);
}
}
</script>
这段代码中定义了一个函数anlysisSearch，该函数利用String对象的一些方法函数把location对象的search属性返回的查询条件字符串分割并存储在了数组arrSearch中。函数writeSearchInfor则实现了输出分析结果的功能。
首先运行含有HTML表单的文件并在表单中填写数据，如图16.21所示，单击“提交”按钮后，程序会调用“search.html处理”表单中的数据并输入分析结果，如图16.22所示。
图16.21 HTML表单中输入的数据 图16.22 分析结果
9．assign方法
【功能说明】该方法的作用与href属性的作用效果相同，可以将当前窗口中的显示内容跳转到指定的URL地址。
【基本语法】location.assign(sURL)
其中，sURL为要跳转到的URL地址。
【实例演示】将href属性的演示实例的代码修改如下，可以实现相同的效果。
<body>
选择页面
<select onChange="window.location.assign(this.options[this.selectedIndex].value)">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
<option value="http://www.hao123.com">hao123</option>
</select>
</body>
10．reload方法
【功能说明】该方法的作用与浏览器工具栏上的刷新按钮相似，可以重新加载当前页面至浏览器窗口，该方法的功能更加强大。
【基本语法】location.reload([breload])
其中，breload为布尔型变量或常量，为True表明要从服务器上重新加载当前页面；为False时表明从缓存中重新加载当前页面。
【实例演示】下面的代码演示了reload方法和使用浏览器刷新的区别。
<form>
文本框<input type="text" >
<input type="checkbox" value="test">复选框<br>
列表框<select>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
<option value="http://www.hao123.com">hao123</option>
</select><br>
<input type="button" value="从服务器刷新" onClick="window.location.reload(true);">
<input type="button" value="从缓存中刷新" onClick="window.location.reload(false);">
</form>
运行这段代码并在其中输入一些数据如图16.23所示，单击浏览器上的刷新按钮以后，表单中的数据将继续存在，而单击表单中的刷新按钮之后表单中的数据将被清空。
11．replace方法
【功能说明】使用指定的页面来替换当前窗口中的文档内容，使用该方法后当前页面也会被从history对象中清除掉，因此当前页面不会出现在浏览器的历史记录中，使用浏览器的“前进”或者“后退”将无法再次查看本页面。
【基本语法】location.replace(sURL)
其中，sURL是要用来替换当前窗口中文档内容的页面的URL地址。。
【实例演示】下面的代码演示了replace方法的用法和作用
<script>
function toReplace(sURL)
{
window.location.replace(sURL);
}
</script>
<form>
<input type="button" value="替换" onClick="toReplace('16.3.2 location对象_hash.html')">
</form>
运行这段代码后窗口会出现一个“替换”按钮，单击该按钮后程序会调用“16.3.2 location对象_hash.html”页面来替换当前页面，如图16.24所示，可以看到浏览器窗口中的“后退”按钮处于不可用状态，因此无法使用“后退”按钮后退到替换前的页面中。
图16.23 reload方法演示 图16.24 replace方法演示
16.3.3 history对象：访问最近所访问的URL的列表
在浏览Web页面时，浏览器会将最近访问过的页面的URL地址保存在一个地址中，使用history对象可以访问这一列表。history对象共有4个属性和3个方法依次介绍如下。
1．current属性
【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的URL地址。
【基本语法】history.current
说明：由于用户的历史页面中往往含有敏感信息，如果所有的Web页面都可以使用history对象获取到用户的历史访问记录，就会导致用户的隐私或敏感数据被他人窥探，因此，只有具有签名脚本的网页才可以使用history对象的current、next和previous属性来获取历史页面的URL地址。
2．next属性
【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的下一条记录的URL地址。
【基本语法】history.next
3．previous属性
【功能说明】该属性为只读属性，用于返回在历史记录列表中当前所访问的历史页面的上一条记录的URL地址。
【基本语法】history.previous
4．length属性
【功能说明】只读属性，返回历史记录列表中的记录条数。
【基本语法】[nCount=]history.length
其中，nCount为整型数据，用于存储length属性返回的历史列表中的记录数目。
【实例演示】下面的代码演示了如何使用length属性得到当前窗口中的历史记录的数目。
<script>
var nCount=window.history.length;
document.write("您曾使用该窗口访问过"+nCount+"个页面");
</script>
运行这段代码可以看到图16.25所示的页面。
5．back、forward方法
【功能说明】该两个方法的作用分别与浏览器工具栏上的“后退”和“前进”按钮的作用相同，通过back方法可以返回到历史记录中前一条记录所对应的页面；而使用forward方法则可以跳转到历史记录中下一条记录所对应的网页中。
【基本语法】history.back()
history.forward()
【实例演示】
<body>
<a href="javascript:window.history.back();">前进</a>
<a href="javascript:window.history.forward();">后退</a>
</body>
这段代码在页面上创建了“前进”和“后退”的超级链接，如图16.26所示，通过这两个链接可以跳转到历史记录中的上一页和下一页。
图16.25 length属性演示 图16.26 back和forward方法演示
6．go方法
【功能说明】从历史列表中加载指定的页面到当前窗口。如果指定的页面超出了历史记录的范围，则历史记录中的最后一页或者最前一页将被显示在窗口当中。
【基本语法】history.go(vloation)
其中，vlocation为必选参数，整数或者字符串，用于从历史记录中调用页面。如果为整数则调用历史记录列表中相对为当前记录的页面；如果为字符串则为历史记录中某一记录所对应的URL地址。因此，可以使用history.go(-1)和history.go(1)实现history.back和history. forward的作用。
【实例演示】使用下面的代码同样可以实现前进和后退的功能。
<body>
<a href="javascript:window.history.go(-1);">前进</a>
<a href="javascript:window.history.go(1);">后退</a>
</body>
