Window对象是DOM对象模型的最顶层对象,代表了浏览器中用于显示文档内容的窗口,通过该对象可以访问DOM对象模型中的所有对象。Window对象和Javascript的内置对象一样,使用的时候无需手动创建,只要在HTML文档或者Web文档中使用了标签或者标签,系统就会自动创建一个Window对象。
16.1 Window对象的方法
16.1.1 alert方法:弹出一个警告对话框
【功能说明】使用Alert方法可以弹出一个含有制定内容的警告对话框,该对话框中还包含有一个叹号图标和一个“确定”按钮。
【基本语法】window.alert(message)
其中,message为任意有效的字符串表达式,该字符串指定了要在对话框上显示的内容。
【实例演示】下面的代码利用Alert方法弹出了一个含有提示信息的对话框。
var strmsg="Window对象的Alert方法测试!";
window.alert(strmsg);
运行这段代码可以看到图16.1所示的对话框。
图16.1 Alert方法演示
16.1.2 confirm:弹出一个选择对话框
【功能说明】该方法与Alert方法相似,弹出一个含有指定信息的对话框,但是该方法同Alert方法弹出的对话框也有不同之处,调用该方法弹出的对话框中含有一个问号图标和两个按钮,一个按钮的标题为“确定”,另一个按钮的标题为“取消”。
该方法的返回值为布尔类型,如果用户单击了“确定”按钮,则该方法返回True;否则返回False。
【基本语法】[blvar=]window.confirm(message)
参数说明如下。
□ message:可选项,字符串表达式,用于指定在弹出的对话框上显示的信息。
□ blvar:可选项,布尔类型,用于存储Confirm方法的返回值。
【实例演示】
Confirm方法演示
function testConfirm()
{
var blvar;
blvar=confirm("你真的要关闭该窗口吗?");
if (blvar)
window.close();
else
window.alert("你取消了关闭窗口操作!") ;
}
运行这段代码后会在窗口中显示一个标题为“关闭窗口”的按钮,如果单击了该按钮就会弹出一个对话框(如图16.2所示),提示是否要关闭窗口。如果选择了“确定”,则系统会关闭当前窗口;否则关闭窗口的操作将不被执行。
图16.2 Confirm方法岩石
16.1.3 prompt方法:弹出一个供用户输入信息的对话框
【功能说明】该方法弹出对话框,该对话框中含有一个文本框并允许在其中输入信息。在调用该方法时可以设置显示在文本框中的默认值。该方法的返回值为在文本框中输入的内容,如果用户没有在文本框中输入任何内容,则该函数的返回值为null。
【基本语法】window.prompt(message,defaultvalue)
参数说明如下。
□ message:可选项,字符串表达式,用于指定显示在对话框上的提示信息。
□ defaultvalue:可选项,字符串或某一数字,用于指定显示在文本框中的默认值。
【实例演示】
var strmsg="请输入你的姓名:";
var strname="李小虎";
strname=window.prompt(strmsg,strname);
if(strname!="" )
{
if (window.confirm("你就是大名鼎鼎的"+strname+"吗?"))
window.alert("见到你真是太荣幸了!!")
}
运行这段代码弹出对话框,如图16.3所示,可以看到这个对话框中含有指定的提示信息和默认值。另外,这段代码中还用到了Confirm方法和Alert方法,这些代码的功能非常简单,不再赘述。
图16.3 prompt方法演示
16.1.4 blur方法:使Window失去焦点
【功能说明】调用该方法后当前Window窗口将失去焦点,此时,Window对象的onblur事件将被触发。如果同时打开了多个窗口,则调用该方法后可以使当前窗口成为底层窗口。
【基本语法】window.blur()
【实例演示】下面的代码演示了如何使用blur方法使Window失去焦点而触发onblur事件。
blur方法演示
运行这段代码后,会在窗口上出现一个标题为“失去焦点”的按钮,点击该按钮后,当前窗口将失去焦点,因此,窗口的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实现了倒计时的功能。
setInterval方法演示
你已经停留秒,
还可以停留秒
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;
}
这段代码通过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方法的作用效果。
setInterval方法演示
var intervalID
intervalID=window.setInterval(setSize,200)
function setSize()
{
document.frm.txt.size++;
}
运行这段代码,窗口中的文本框的长度将不断地增加,直到点击了“停止”按钮。代码中通过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方法的不同。
setTimeout方法演示
代码已执行了秒
var timeLen=24;
window.setInterval("document.frm.txt.value=timeLen--",1000);
window.setTimeout("window.alert('已经过了5秒')",5*1000);
这段代码体现了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()
【实例演示】下面的代码演示了如何直接关闭浏览器窗口。
function closeWindow()
{
window.opener=null;
window.close();
}
执行这段代码会在浏览器窗口上出现一个标题为“关闭窗口”的按钮,点击该按钮窗口将被直接关闭,而不弹出任何对话框。
图16.8 询问对话框
16.1.10 focus方法:使窗口获得焦点
【功能说明】调用该方法之后,window窗口将成为当前窗口。
【基本语法】window.focus()
16.1.11 moveBy方法:通过指定偏移量来移动窗口
【功能说明】该方法通过指定窗口左上角的坐标偏移量来移动窗口,即在现在坐标的基础上按指定的值改变窗口的位置。
【基本语法】window.moveBy(ix,iy)
参数说明如下。
□ ix:必选项,整数,窗口左上角横坐标的改变量。
□ iy:必选项,整数,窗口左上角纵坐标的改变量。
注意:这里采用的坐标系统为计算机的默认坐标系统,即屏幕左上角为坐标原点,向右为横坐标正方向,横坐标增加,向下为纵坐标正方向,纵坐标增加。
【实例演示】下面的代码演示了如何利用moveBy方法移动窗口。
var imoved=0;
var intervalID;
intervalID=window.setInterval(moveWindow,100);
function moveWindow()
{
//移动窗口
window.moveBy(1,1);
imoved++;
//如果与演示坐标的偏移量达到500则停止移动
if (imoved>=500)
window.clearInterval(intervalID);
}
这段代码运行后,每隔0.1秒就将窗口向右和向左分别移动1个像素,如果与原始坐标相比,移动的偏移量超过500,则停止移动窗口。
16.1.12 moveTo方法:移动窗口到指定的坐标
【功能说明】该方法可以将窗口的左上角移动到指定的坐标处,该方法与moveBy方法不同,该方法所指定的数值不是偏移量而是绝对坐标。
【基本语法】window.moveTo(xp,yp)
参数说明如下。
□ xp:必选项,整数,指定的窗口左上角的新的横坐标。
□ yp:必选项,整数,指定的窗口左上角的新的纵坐标。
【实例演示】下面的代码演示了如何使用moveTo方法移动窗口。
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);
}
这段代码利用随机产生的横坐标和纵坐标来移动窗体,执行这段代码之后,窗口将在屏幕上不停的跳动,直到跳到次数达到50次为止。
16.1.13 open方法:打开一个新的窗口
【功能说明】该方法可以根据指定的属性打开一个新窗口,并可以在该窗口中显示指定URL中的内容。该方法的返回值为一个窗口对象,通过该对象可以访问和操作新打开的窗口。
【基本语法】window.open([sURL][,sName][, sFeatures])
参数说明如下。
□ sURL:可选项,字符串表达式,用于指定在新窗口中显示的内容,如果没有指定该项,则在窗口中显示的内容为空。
□ sName:可选项,字符串表达式,用于指定窗口的名称,另外该项也与HTML标签具有相同的作用相同,可以指定窗口的打开位置和类型。表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显示
【实例演示】
//在新窗口中打开指定页面
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("公告");
newWin.document.write("这是一个open方法测试");
}
这段代码中定义了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:必选项,整型数据,用于指定窗口右下角的纵坐标的偏移量。
【实例演示】
var iresized=0;
var ixy=-1;
window.setInterval(resizeWindow,10);
function resizeWindow()
{
window.resizeBy(ixy,ixy);
iresized++;
if (iresized>500)
{
ixy*=-1;
iresized=0;
}
}
这段代码每隔10毫秒就将窗口的大小增加或减小1个像素,如果窗口的改变超过500个像素,则窗口向相反的方向改变。即:如果窗口增加了500个像素,则窗口开始减小;如果窗口减小了500个像素,则窗口开始增加。运行这段代码窗口会先减小再增加,如此反复不止。
16.1.16 resizeTo方法:通过指定窗口右下角的新坐标来改变窗口的大小
【功能说明】该方法同resizeBy方法类似,也是通过改变窗口右下角的位置来改变窗口的大。不同的是,resizeBy指定的是窗口右下角坐标的偏移量,而resizeTo方法指定的则是窗口右下角的新的坐标,即窗口右下角直接移动到指定的坐标上。
【基本语法】window.resizeTo(ix,iy)
参数说明如下。
□ ix:必选项,整型数据,用于指定窗口右下角的新的横坐标。
□ iy:必选项,整型数据,用于指定窗口右下角的新的纵坐标。
【实例演示】下面的代码利用rsizeTo方法把窗口的大小调整到了屏幕大小。
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);
}
运行这段代码后,会在窗口中出现一个“开始”按钮,单击该按钮,弹出一个长和宽均为100像素的窗口,然后,窗口的长和宽开始每隔10毫秒增加5个像素,直到长和宽均达到屏幕大小为止。
16.1.17 scrollTo方法:滚动窗口中的内容到新的位置
【功能说明】该方法可以按给定的横坐标和纵坐标的偏移量来滚动显示窗口中的内容。
【基本语法】window.scrollTo(ix,iy)
参数说明如下。
□ ix:必选项,整型数据,以像素为单位指定窗口横坐标的滚动偏移量。
□ iy:必选项,整型数据,以像素为单位指定窗口纵坐标的滚动偏移量。
注意:只有当窗口中的内容无法在窗口中全部显示时,即窗口中出现滚动条时,窗口才可以滚动,否则调用scrollTo方法将得不到任何效果。
【实例演示】下面的代码实现了双击自动滚屏的效果。
var i,intervalID;
var iw=0;
var ih=1;
document.write("双击开始滚屏");
for(i=1;i
{
document.write(i);
document.write("
");
}
function toScroll()
{
intervalID=window.setInterval(scrollWindow,10);
}
function scrollWindow()
{
ih++;
window.scroll(iw,ih);
}
这段代码运行时,首先在窗口上输出了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文件并在其中输入如下代码。
showModalDialog方法测试
var sFeatures;
var para;
//设置传递给对话框的参数
para="
this is a test
openModalDialog方法测试" ;
para=para+"
在关闭该窗口以前,其他窗口无法获得焦点";
sFeatures="center=yes;edge=raised;status=yes;";
sFeatures=sFeatures+"dialogHeight=250 px;dialogWidth=250 px";
window.showModalDialog("dialog.html",para,sFeatures);
然后再创建一个名为“dialog.html”的HTML文件并在其中输入如下代码。
openModalDialog方法测试。
获取的参数为:
document.write(window.dialogArguments);
运行第一段代码,窗口中弹出一个对话框,如图16.11所示。
图16.11 showModalDialog方法演示
可以看到指定的数据成功的传递给了打开的模式对话框,而且在对话框中可以很容易地获取并显示这些数据。
16.1.20 showModalessDialog方法:打开一个非模式对话框并显示指定内容
【功能说明】非模式对话框与模式对话框不同,在打开非模式对话框时还可以对其他窗口进行操作。showModalessDialog方法的作用就是创建一个非模式对话框并在其中显示指定的页面内容。
该方法的返回值与showModalDialog方法也不同,该方法的返回值为打开的窗口对象。
【基本语法】window.showModalessDialog(sURL[,vArguments][,sFeatures])
参数说明如下。
□ sURL:必选项,字符串表达式,用于指定在打开的非模式对话框中显示的内容。
□ vArgument:可选项,任意类型的数据,这些数据将被传递给打开的对话框,在对话框中可以使用dialogArguments属性来获取传递给对话框的数据。
□ sFeatures:可选项,字符串表达式,用于指定所打开的对话框的属性。关于该选项的部分常用设置即说明请参考表16.3。
【实例演示】
var sFeatures;
var para;
var newWin;
para="showModalessDialog方法演示" ;
para+="
打开该窗口后还可操作其他窗口
";
para+="
window.close();'"
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);
这段代码通过showModalessDialog方法打开了一个非模式对话框,然后通过对该对话框窗口的引用向对话框中写入了一些内容。运行这段代码可以看到图16.12所示的效果。
图16.12 showModalessDialog方法演示
16.1 Window对象的方法
16.1.1 alert方法:弹出一个警告对话框
【功能说明】使用Alert方法可以弹出一个含有制定内容的警告对话框,该对话框中还包含有一个叹号图标和一个“确定”按钮。
【基本语法】window.alert(message)
其中,message为任意有效的字符串表达式,该字符串指定了要在对话框上显示的内容。
【实例演示】下面的代码利用Alert方法弹出了一个含有提示信息的对话框。
var strmsg="Window对象的Alert方法测试!";
window.alert(strmsg);
运行这段代码可以看到图16.1所示的对话框。
图16.1 Alert方法演示
16.1.2 confirm:弹出一个选择对话框
【功能说明】该方法与Alert方法相似,弹出一个含有指定信息的对话框,但是该方法同Alert方法弹出的对话框也有不同之处,调用该方法弹出的对话框中含有一个问号图标和两个按钮,一个按钮的标题为“确定”,另一个按钮的标题为“取消”。
该方法的返回值为布尔类型,如果用户单击了“确定”按钮,则该方法返回True;否则返回False。
【基本语法】[blvar=]window.confirm(message)
参数说明如下。
□ message:可选项,字符串表达式,用于指定在弹出的对话框上显示的信息。
□ blvar:可选项,布尔类型,用于存储Confirm方法的返回值。
【实例演示】
Confirm方法演示
function testConfirm()
{
var blvar;
blvar=confirm("你真的要关闭该窗口吗?");
if (blvar)
window.close();
else
window.alert("你取消了关闭窗口操作!") ;
}
运行这段代码后会在窗口中显示一个标题为“关闭窗口”的按钮,如果单击了该按钮就会弹出一个对话框(如图16.2所示),提示是否要关闭窗口。如果选择了“确定”,则系统会关闭当前窗口;否则关闭窗口的操作将不被执行。
图16.2 Confirm方法岩石
16.1.3 prompt方法:弹出一个供用户输入信息的对话框
【功能说明】该方法弹出对话框,该对话框中含有一个文本框并允许在其中输入信息。在调用该方法时可以设置显示在文本框中的默认值。该方法的返回值为在文本框中输入的内容,如果用户没有在文本框中输入任何内容,则该函数的返回值为null。
【基本语法】window.prompt(message,defaultvalue)
参数说明如下。
□ message:可选项,字符串表达式,用于指定显示在对话框上的提示信息。
□ defaultvalue:可选项,字符串或某一数字,用于指定显示在文本框中的默认值。
【实例演示】
var strmsg="请输入你的姓名:";
var strname="李小虎";
strname=window.prompt(strmsg,strname);
if(strname!="" )
{
if (window.confirm("你就是大名鼎鼎的"+strname+"吗?"))
window.alert("见到你真是太荣幸了!!")
}
运行这段代码弹出对话框,如图16.3所示,可以看到这个对话框中含有指定的提示信息和默认值。另外,这段代码中还用到了Confirm方法和Alert方法,这些代码的功能非常简单,不再赘述。
图16.3 prompt方法演示
16.1.4 blur方法:使Window失去焦点
【功能说明】调用该方法后当前Window窗口将失去焦点,此时,Window对象的onblur事件将被触发。如果同时打开了多个窗口,则调用该方法后可以使当前窗口成为底层窗口。
【基本语法】window.blur()
【实例演示】下面的代码演示了如何使用blur方法使Window失去焦点而触发onblur事件。
blur方法演示
运行这段代码后,会在窗口上出现一个标题为“失去焦点”的按钮,点击该按钮后,当前窗口将失去焦点,因此,窗口的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实现了倒计时的功能。
setInterval方法演示
你已经停留秒,
还可以停留秒
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;
}
这段代码通过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方法的作用效果。
setInterval方法演示
var intervalID
intervalID=window.setInterval(setSize,200)
function setSize()
{
document.frm.txt.size++;
}
运行这段代码,窗口中的文本框的长度将不断地增加,直到点击了“停止”按钮。代码中通过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方法的不同。
setTimeout方法演示
代码已执行了秒
var timeLen=24;
window.setInterval("document.frm.txt.value=timeLen--",1000);
window.setTimeout("window.alert('已经过了5秒')",5*1000);
这段代码体现了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()
【实例演示】下面的代码演示了如何直接关闭浏览器窗口。
function closeWindow()
{
window.opener=null;
window.close();
}
执行这段代码会在浏览器窗口上出现一个标题为“关闭窗口”的按钮,点击该按钮窗口将被直接关闭,而不弹出任何对话框。
图16.8 询问对话框
16.1.10 focus方法:使窗口获得焦点
【功能说明】调用该方法之后,window窗口将成为当前窗口。
【基本语法】window.focus()
16.1.11 moveBy方法:通过指定偏移量来移动窗口
【功能说明】该方法通过指定窗口左上角的坐标偏移量来移动窗口,即在现在坐标的基础上按指定的值改变窗口的位置。
【基本语法】window.moveBy(ix,iy)
参数说明如下。
□ ix:必选项,整数,窗口左上角横坐标的改变量。
□ iy:必选项,整数,窗口左上角纵坐标的改变量。
注意:这里采用的坐标系统为计算机的默认坐标系统,即屏幕左上角为坐标原点,向右为横坐标正方向,横坐标增加,向下为纵坐标正方向,纵坐标增加。
【实例演示】下面的代码演示了如何利用moveBy方法移动窗口。
var imoved=0;
var intervalID;
intervalID=window.setInterval(moveWindow,100);
function moveWindow()
{
//移动窗口
window.moveBy(1,1);
imoved++;
//如果与演示坐标的偏移量达到500则停止移动
if (imoved>=500)
window.clearInterval(intervalID);
}
这段代码运行后,每隔0.1秒就将窗口向右和向左分别移动1个像素,如果与原始坐标相比,移动的偏移量超过500,则停止移动窗口。
16.1.12 moveTo方法:移动窗口到指定的坐标
【功能说明】该方法可以将窗口的左上角移动到指定的坐标处,该方法与moveBy方法不同,该方法所指定的数值不是偏移量而是绝对坐标。
【基本语法】window.moveTo(xp,yp)
参数说明如下。
□ xp:必选项,整数,指定的窗口左上角的新的横坐标。
□ yp:必选项,整数,指定的窗口左上角的新的纵坐标。
【实例演示】下面的代码演示了如何使用moveTo方法移动窗口。
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);
}
这段代码利用随机产生的横坐标和纵坐标来移动窗体,执行这段代码之后,窗口将在屏幕上不停的跳动,直到跳到次数达到50次为止。
16.1.13 open方法:打开一个新的窗口
【功能说明】该方法可以根据指定的属性打开一个新窗口,并可以在该窗口中显示指定URL中的内容。该方法的返回值为一个窗口对象,通过该对象可以访问和操作新打开的窗口。
【基本语法】window.open([sURL][,sName][, sFeatures])
参数说明如下。
□ sURL:可选项,字符串表达式,用于指定在新窗口中显示的内容,如果没有指定该项,则在窗口中显示的内容为空。
□ sName:可选项,字符串表达式,用于指定窗口的名称,另外该项也与HTML标签具有相同的作用相同,可以指定窗口的打开位置和类型。表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显示
【实例演示】
//在新窗口中打开指定页面
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("公告");
newWin.document.write("这是一个open方法测试");
}
这段代码中定义了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:必选项,整型数据,用于指定窗口右下角的纵坐标的偏移量。
【实例演示】
var iresized=0;
var ixy=-1;
window.setInterval(resizeWindow,10);
function resizeWindow()
{
window.resizeBy(ixy,ixy);
iresized++;
if (iresized>500)
{
ixy*=-1;
iresized=0;
}
}
这段代码每隔10毫秒就将窗口的大小增加或减小1个像素,如果窗口的改变超过500个像素,则窗口向相反的方向改变。即:如果窗口增加了500个像素,则窗口开始减小;如果窗口减小了500个像素,则窗口开始增加。运行这段代码窗口会先减小再增加,如此反复不止。
16.1.16 resizeTo方法:通过指定窗口右下角的新坐标来改变窗口的大小
【功能说明】该方法同resizeBy方法类似,也是通过改变窗口右下角的位置来改变窗口的大。不同的是,resizeBy指定的是窗口右下角坐标的偏移量,而resizeTo方法指定的则是窗口右下角的新的坐标,即窗口右下角直接移动到指定的坐标上。
【基本语法】window.resizeTo(ix,iy)
参数说明如下。
□ ix:必选项,整型数据,用于指定窗口右下角的新的横坐标。
□ iy:必选项,整型数据,用于指定窗口右下角的新的纵坐标。
【实例演示】下面的代码利用rsizeTo方法把窗口的大小调整到了屏幕大小。
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);
}
运行这段代码后,会在窗口中出现一个“开始”按钮,单击该按钮,弹出一个长和宽均为100像素的窗口,然后,窗口的长和宽开始每隔10毫秒增加5个像素,直到长和宽均达到屏幕大小为止。
16.1.17 scrollTo方法:滚动窗口中的内容到新的位置
【功能说明】该方法可以按给定的横坐标和纵坐标的偏移量来滚动显示窗口中的内容。
【基本语法】window.scrollTo(ix,iy)
参数说明如下。
□ ix:必选项,整型数据,以像素为单位指定窗口横坐标的滚动偏移量。
□ iy:必选项,整型数据,以像素为单位指定窗口纵坐标的滚动偏移量。
注意:只有当窗口中的内容无法在窗口中全部显示时,即窗口中出现滚动条时,窗口才可以滚动,否则调用scrollTo方法将得不到任何效果。
【实例演示】下面的代码实现了双击自动滚屏的效果。
var i,intervalID;
var iw=0;
var ih=1;
document.write("双击开始滚屏");
for(i=1;i
{
document.write(i);
document.write("
");
}
function toScroll()
{
intervalID=window.setInterval(scrollWindow,10);
}
function scrollWindow()
{
ih++;
window.scroll(iw,ih);
}
这段代码运行时,首先在窗口上输出了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文件并在其中输入如下代码。
showModalDialog方法测试
var sFeatures;
var para;
//设置传递给对话框的参数
para="
this is a test
openModalDialog方法测试" ;
para=para+"
在关闭该窗口以前,其他窗口无法获得焦点";
sFeatures="center=yes;edge=raised;status=yes;";
sFeatures=sFeatures+"dialogHeight=250 px;dialogWidth=250 px";
window.showModalDialog("dialog.html",para,sFeatures);
然后再创建一个名为“dialog.html”的HTML文件并在其中输入如下代码。
openModalDialog方法测试。
获取的参数为:
document.write(window.dialogArguments);
运行第一段代码,窗口中弹出一个对话框,如图16.11所示。
图16.11 showModalDialog方法演示
可以看到指定的数据成功的传递给了打开的模式对话框,而且在对话框中可以很容易地获取并显示这些数据。
16.1.20 showModalessDialog方法:打开一个非模式对话框并显示指定内容
【功能说明】非模式对话框与模式对话框不同,在打开非模式对话框时还可以对其他窗口进行操作。showModalessDialog方法的作用就是创建一个非模式对话框并在其中显示指定的页面内容。
该方法的返回值与showModalDialog方法也不同,该方法的返回值为打开的窗口对象。
【基本语法】window.showModalessDialog(sURL[,vArguments][,sFeatures])
参数说明如下。
□ sURL:必选项,字符串表达式,用于指定在打开的非模式对话框中显示的内容。
□ vArgument:可选项,任意类型的数据,这些数据将被传递给打开的对话框,在对话框中可以使用dialogArguments属性来获取传递给对话框的数据。
□ sFeatures:可选项,字符串表达式,用于指定所打开的对话框的属性。关于该选项的部分常用设置即说明请参考表16.3。
【实例演示】
var sFeatures;
var para;
var newWin;
para="showModalessDialog方法演示" ;
para+="
打开该窗口后还可操作其他窗口
";
para+="
window.close();'"
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);
这段代码通过showModalessDialog方法打开了一个非模式对话框,然后通过对该对话框窗口的引用向对话框中写入了一些内容。运行这段代码可以看到图16.12所示的效果。
图16.12 showModalessDialog方法演示