JavaScript学习(二十六)——window窗体对象

我心飞翔 分类:javascript

目录

window对象的使用

对话框

警告对话框

询问回答对话框

提示对话框

窗口的打开和关闭

打开窗口

关闭窗口

1.关闭当前窗口

2、关闭子窗口

控制窗口

移动窗口

改变窗口大小

窗口滚动


在HTML中打开对话框应用极为普遍,但也有一些缺陷。用户浏览器决定对话框的样式。在JavaScript中可以使用window对象来实现对对话框的控制。

window对象代表打开的浏览器窗口,通过window对象可以控制窗口的大小和位置、由窗口弹出的对话框、打开窗口与关闭窗口,还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。对于窗口中的内容,window 对象可以控制是否重载网页、返回上一个文档或前进到下一一个文档。
在框架方面,window对象可以处理框架与框架之间的关系,并通过这种关系在.个框架处理另个框架中的文档。window对象还是所有其他对象的顶级对象,通过对window对象的子对象进行操作,可以实现更多的动态效果。wndow 对象作为对象的种, 也有着其自己的方法和属性。

window对象的使用

window 对象可以直接调用其方法和属性,例如:

window.属性名,
window.方法名(参数列表)
window是不需要使用new运算符来创建的对象。因此,在使用window对象时,只要直接使用window来引用window对象即可。代码如下:
window. alert("字符串");
window. document.write("字符串");

在实际运用中,JavaScript 允许使用一 个字符串来给窗口命名,也可以使用一些关键字来代替某些特定的窗口。例如,使用self代表当前窗口,parent 代表父级窗口等。对于这种情况,可以用这些字符串来代表window,代码如下:

parent.属性名
parent.方法名(参数列表)

对话框

对话框(Dialog)是响应用户某种需求而弹出的小窗口。

警告对话框

在页面显示时弹出警告对话框主要是在<body>标记中调用window对象的alert()方法实现的,下面对该方法进行详细说明。
利用window对象的alert()方法可以弹出-一个警告框,并且在警告框内可以显示提示字符串文本。语法:
window. alert(str)

参数说明:
str:表示要在警告对话框中显示的提示字符串。
用户可以单击警告对话框中的“确定”按钮来关闭该警告对话框。不同浏览器的警告对话框样式可能会有些不同.

注意:
警告对话框是由当前运行的页面弹出的,在对该对话框进行处理之前,不能对当前页面进行操作,并且其后面的代码也不会被执行。只有将警告对话框进行处理后(如单击“确定”按钮或者关用对话框),才可以对当前页面进行操作,后面的代码也才能继续执行。

说明:
也可以利用alert()方法对代码进行调试。当弄不清楚某段代码执行到哪里,或者不知道当前变导的取值情况时,便可以利用该方法显示有用的调试信息。

询问回答对话框

window对象的confirm()方法用于弹出一个询问回答为是或否问题的对话框。该对话框中包含两个按钮(在中文操作系统中显示为“确定”和“取消”,在英文操作系统中显示为OK和Cancel),用户单击“确定”按钮,返回值为true;单击“取消”按钮,返回值为false.
语法:

window. confirm(question)

提示对话框

利用window对象的prompt()方法可以在浏览器窗口中弹出一个提示框。与警告框和确认框不同,在提示框中有一个文本框。当显示文本框时,在其中显示提示字符串,并等待用户输入,当用户在该文本框中输入文字后,并单击“确定”按钮时,返回用户输入的字符串,当单击“取消”按钮时,返回null值。

语法:
window.prompt(str1,str2)

参数说明:
str1:可选项。表示字符串(String) ,指定在对话框内要被显示的信息。如果忽略此参数,将 不显示任何信息。
str2:可选项。表示字符串(String),指定对话框内输入框(input) 的值(value) 。如果忽略此参数,将被设置为undefined.

窗口的打开和关闭

窗口的打开与关闭主要使用open()和close()方法实现,也可以在打开窗口时指定窗口的大小以及位置。

打开窗口

可以使用JavaScript的open()方法打开浏览器对话框。作为一名程序开发人员, 可以基于特定的条件创建带有被装入其中的特定文档的新对话框,也可以指定新对话框的大小以及对话框中可用的选项,并且可以为引用的对话框命名。
利用open()方法可以打开一个新的窗口, 并在窗口中装载指定URL地址的网页。语法:

windowVar=window.open(url,windowname[,location]);
参数说明:
windowVar:  当前打开窗口的句柄。如果open()方法成功,则windowVar的值为一个window对象的句柄,否则是一个空值。
url:目标窗口的 URL。如果URL是一个空字符串, 则浏览器将打开一个空白窗口, 允许用write()方法创建动态HTML。
windowname: window对象的名称。 该名称可以作为属性值在<a>和<form>标记的target属性中出现。如果指定的名称是一个已经存在的窗口名称,则返回对该窗口的引用,而不会再打开一个新窗口。
location: 对对话框属性进行设置的可选参数及说明。

例如,打开一个新窗口。代码如下:
window.open("new.htm","new");
打开一个指定大小的窗口。代码如下:
window.open("new.htm","new" ,"height= 141,width=693");

打开一个指定位置的窗口。代码如下:
window. open("new htm"new","height=141,wldth=693,top=10,left=20");

打开一个带滚动条的固定窗口。代码如下:

window. open("new htm"new"srollbars,resizable");
打开一个新的浏览器对话框,在该对话框中显示bookinfo.htm 文件,设置打开对话框的名称为bookinfo,并设置对话框的宽度和高度。代码如下:
var win=window. open("bookinfo htm", "bookinfo","width=40,heigh=300");

注意

在使用open()方法时,需要注意以下几点:

(1)通常在浏览器窗口中,总有一个文档是打开的。因而不需要为输出建立一一个新文档。

(2)在完成对Web文档的写操作后,要使用或调用close()方法来实现对输出流的关闭。

(3)在使用open()方法打开一一个新流时,可为文档指定一个有效的文档类型,有效文档类型包括text/HTML、textgif、 text/xim 和text/plugin等。

关闭窗口

在对窗口进行关闭时,主要有关闭当前窗口和关用子窗口两种操作,下面分别对其介绍:

1.关闭当前窗口

利用window对象的close()方法可以实现关闭当前窗口。语法:
window.close();
例如,关闭当前窗口,可以用下面的任何一种语句实现。
1. window.close();

2. close();

3.this.close();

2、关闭子窗口

通过close()方法,用户可以关闭以前动态创建的窗口,在窗口创建时,将窗口句柄以变量的形宝进行保存,然后通过close()方法关闭创建窗口。
语法:

windowname.close();
参数说明:
windowname:已打开窗口的句柄。

 

控制窗口

通过window对象除了可以打开窗口与关闭窗口之外,还可以控制窗口的大小和位置、由窗口弹出的对话框,以及控制窗口上是香显示地址栏、工具栏和状态栏等栏目。而且window对象可以返回上一个文档或前进到下一个文档,还可以停止加载文档。

移动窗口

下面介绍几种移动窗口的方法。

(1) moveTo()方法
利用moveTo()方法可以将窗口移动到指定坐标(x,y)处。语法:

window.moveTo(x,y)

参数说明:
x: 窗口左上角的x坐标。

y:窗口左上角的y坐标。
例如,将窗口移动到指定坐标(300,300)处,代码如下:

window.moveTo(300,300)

注意:
moveTo()方法是Navigator和IE都支持的方法,它不属于W3C标准的DOM.

(2) resizeTo()方法
利用resizeTo()方法可以将当前窗口改变成(x,y)大小,x、 y分别为宽度和高度。语法:

window.resizeTo(x,y)
参数说明:
X:窗口的水平宽度。

y:窗口的垂直宽度。
例如,将当前窗口改变成(300,200)大小,代码如下:

winlow. resizeTo(300,200)

(3)screen对象

该对象是JavaScript中的屏幕对象,反映了当前用户的屏幕设置。

window.screen.width;  //屏幕宽度
window.screen.height;  //屏幕高度
window.screen.colorDepth;  //屏幕色深
window.screen.availWidth;  //可用宽度
window.screen.availHeight;  //可用高度
 

例子:本实例是在窗口打开时,将窗口放在屏幕的左上角,并将窗口从左到右以随机的角度进行移动;当窗口的外边框碰到屏幕四边时,窗口将进行反弹。

本实例主要使用screen对象的availWidth和availHeight属性来获得当前屏幕的宽度和高度,然后判断窗口的4个边是否碰到屏幕的4个边界,如果碰到,则进行反弹,然后编写用于实现移动窗口的JavaScript代码。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >	
<script type="text/javascript"> 
window.resizeTo(300,300); //指定窗口将改成(300,300)大小
window.moveTo(0,0);   //将窗口移动到指定坐标处
inter=setInterval("go()",1);
var aa=0;
var bb=0;
var a=0;
var b=0;
function go(){
try{
if(aa==0) a=a+2;
if(a>screen.availWidth-300)
aa=1;
if(aa==1) a=a-2;
if(a==0) aa=0;
if(bb==0)
b=b+2;
if(b>screen.availHeight-300)
bb=1;
if(bb==1)
b=b-2;
if(b==0)
bb=0;
window.moveTo(a,b);
}catch(e){
}
}
</script>
</body>
</html>
 

 

改变窗口大小

利用window对象的resizeBy()方法可以实现将当前窗口改变指定的大小(x,y),当x、y的值大于0时为扩大,小于0时为缩小。
语法:

window.resizeBy(x,y)
参数说明:
X:放大或缩小的水平宽度。

y: 放大或缩小的垂直宽度。
例如,改变当前窗口的大小。代码如下: window.resizeBy(x,y)

例子: 本实例在打开index.htm文件后,在该页面中单击“单击此链接打开一个自动改变大小的窗口”超链接,在屏幕的左上角将会弹出一个“改变窗口大小”窗口,井动态改一个自动改变大高度,直到与屏幕大小相同为止。

编写用于实现打开窗口特殊效果的JavaScript代码。自定义函数go1(),用于打开指定的窗口,并设置其位置和大小。

<script type="text/javascript"> 
var winheight,winsize,x;
function go1(){
winheight=100;
winsize=100;
x=5;
win2=window.open("index.html","","scrollbars='no'");
win2.moveTo(0,0);
win2.resizeTo(100,100); 
go2();
}

自定义函数go2(),用于动态改变窗口的大小。

function go2(){
if(winheight>=screen.availHeight-3)
x=0;
win2.resizeBy(5,x);
winheight+=5;
winsize+=5;
if(winsize>=screen.width-5)
{
winheight=100;
winsize=100;
x=5;
return;
}
setTimeout("go2()",50);
}
</script>

 

窗口滚动

利用window对象的scroll()方法可以指定窗口的当前位置,从而实现窗口滚动效果。语法:

scroll(x,y);
参数说明:
x:屏幕的横向坐标。y:屏幕的纵向坐标。 
window对象中有3种方法可以用来滚动窗口中的文档,这3种方法的使用如下:

1. window.scroll(x,y)

2. window.scrollTo(x,y)

3. window.scrollBy(x,y)

以上3种方法的具体解释如下:

scroll(): 该方法可以将窗口中显示的文档滚动到指定的绝对位置。滚动的位置由参数x和y决定,其中x为要滚动的横向坐标,y为要滚动的纵向坐标。两个坐标都是相对于文档的左上角而言的,即文档的左上角坐标为(0,0)。

scrollTo(): 该方法的作用与scroll()方法完全相同。scrol()方 法是JavaScript 1.1 中所规定的,而scrollTo()方法是JavaScript 1.2中所规定的。建议使用scrollTo()方法。

scrollBy(): 该方法可以将文档滚动到指定的相对位置上,参数x和y是相对于当前文档位置的坐标。如果参数x的值为正数,则向右滚动文档;如果参数x的值为负数,则向左滚动文档。与此类似,如果参数y的值为正数,则向下滚动文档;如果参数y的值为负数,则向上滚动文档。

 

 

 

 

 

 

 

 

回复

我来回复
  • 暂无回复内容