目录
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的值为负数，则向上滚动文档。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！