JavaScript学习(6)使用窗口和框架
1.用对象控制窗口
1.1访问窗口属性和方法
窗口对象的属性和方法的脚本引用有两种，其中最符合逻辑、最通用的方法是在引用中包含window对象。如：window.propertyName。当脚本引用指向存放文档的窗口时，window对象还有一个同义字self，如：self.propertyName。用户可以交替使用这些初始引用对象名，但是在更为复杂的、涉及更多框架和窗口的脚本中使用self更适合。self名可以清晰地存放脚本文档的当前窗口，它使得脚本对于所有用户更容易读。因为window对象在脚本运行时都是一直存在的，所以窗口内任何对象在引用它时都可以忽略它，如：propertyName。
1.2创建新窗口
如果要打开一个指定大小的心窗口，并且要求这个窗口处于当前页面的同一个服务器目录下的HTML文档中，就可以使用如下的语句：
var subWindow = window.open("define.html" , "def", "height = 200, width = 300");
假如需要访问它的一个属性或方法，必须把这个引用作为整个引用的一部分。如：
subWindow.close();
实例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> window对象的引用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var nweWindow function creatNew() { newWindow = window.open("",""); } function closeNew() { newWindow.close(); } // --></mce:script> <BODY> <form> <input type = "button" value = "open new window" onClick = "creatNew()"> <input type = "button" value = "close new window" onclick = "closeNew()"> </form> </BODY> </HTML> </span>
2.窗口属性
本节主要讨论window的属性，下表列出了IE支持的window对象的属性
closed 表示窗口是否已经关闭
dafaultstatus 指定在浏览器窗口中底部状态栏中，显示的默认状态信息
frames window对象中包含的所有frame对象的数组
length 表示window对象中包含的帧的个数
location 表示与window对象相关的URL的地址
name 窗口标识
opener 标识打开窗口的window对象
parent “双亲”，与包含某个窗口的父窗口含义相同
self “窗口自身”，与引用的当前窗口含义相同
status 指定浏览器状态栏中出现的临时性信息
top 指一系列嵌套窗口中的最上层浏览器窗口
screen 存储窗口所在屏幕信息的子对象（分辨率等）
2.1closed属性
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> closed的使用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY onclick = "self.close()"> <center> <font color = "blue" size = "5">window对象</font><br> closed属性<br> </center> </BODY> </HTML> </span>
2.2status属性
设置窗口的status属性是非常简单的事情，通常脚本语句作为事件处理定义中的内嵌脚本来运行。这对于短的脚本来说非常方便，因为不必说明一个单独的函数或在页面上加入<script>标记，仅仅需要把脚本语句加入<a>标记即可。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> status的应用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <a href = "http://www.baidu.com/" onmouseover = "window.status = '百度一下，你就知道'; return true;" onmouseout = "window.status = '谢谢'">百度百度？</a> </BODY> </HTML> </span>
2.3opener属性
许多脚本开发人员都有这样的一种错误想法，认为由window.open()方法创建的浏览器窗口有一个父子关系，正如一个框架与它的父亲框架一样。其实实际情况不是这样，新的浏览器窗口一旦创建，与它的源窗口只有很小的关系，即opener属性。该属性的目的在于为新窗口中的脚本提供一个有效地引用，使之回到源窗口中。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> opener </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- queryWin = open("7-1DOM.html","","height=100"); // --></mce:script> <BODY> </BODY> </HTML></span>
3.窗口的方法
IE支持的window对象的方法
alert() 显示提示信息对话框
confirm() 显示确定对话框
find() 当触发该方法时，将弹出一个find对话框
Print() 模拟用户单击浏览器上的“打印”按钮，通知浏览器打开“打印”对话框
Prompt() 显示要求键盘输入
Open() 打开指定窗口
Close() 关闭指定窗口
Blur() 删除窗口的焦点属性
Focus() 将焦点属性移动到特定窗口
Moveby() 按照给定像素参数移动指定窗口
Moveto() 将窗口移动到指定的坐标(x,y)处
Resizeby() 讲窗口中的内容按给定的位移量滚动。参数为正，正向滚动；否则反向
Scrollto() 将窗口中的内容滚动到指定位置
Setinterval() 经过定时时间后，对表达式重复求值
Clearinterval() 取消Setinterval设置的定时
Settimeout() 经过定时时间后，对表达式求职
Cleantimeout() 消除以前的定时设置
3.1alert()方法
该方法用来显示一个警告对话框，该对话框显示传给参数的文本，它类似于由MsgBox函数产生的信息框，但只含一个“确定”按钮。在执行该方法时，讲显示一条信息并将保持在屏幕上，脚本的执行过程被暂停，知道用户单击“确定”按钮。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> alert方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form> <input type = "button" value = "click here" onclick = "alert('thank you')"> </form> </BODY> </HTML> </span>
3.2confirm方法
confirm方法和alert方法很相似，它也是现实一个信息框，但这个信息框有两个按钮，分别为“确定”和“取消”。如果单击“确定”按钮，则confirm方法返回true；如果单击“取消”按钮，则返回false。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> confirm </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <form> <input type = "button" value = "confirm" onclick = "confirm('do you want to submit the data ?')"> </form> </BODY> </HTML> </span>
3.3prompt()方法
prompt方法用来提示用户输入数据，它类似于inputbox函数。prompt()方法接受两个参数，其中一个是提示信息，另一个是可选的默认信息。执行该方法后显示一个对话框，让用户输入信息，输入后单击“确定”按钮，将返回用户在对话框输入的信息。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> prompt方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function newPrompt() { var answer = prompt("please enter your name" , "Me a"); if(answer) { alert("hello, "+answer+"."); } } // --></mce:script> <BODY> <form> <input type = "button" value = "click" onclick = "newPrompt()"> </form> </BODY> </HTML> </span>
3.4moveTo()方法
moveTo()方法和moveBy()方法的区别就在于一个是绝对运动，另一个是与当前窗口位置相关的相对运动。为moveTo制定的参数就是屏幕上窗口的左上角的横坐标和纵坐标；相反moveBy的参数表示在每个方向上要将窗口调整多远。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> moveTo（）方法使用 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function movewin(form) { var winx = form.X.value; var winy = form.Y.value; window.moveTo(winx,winy); } // --></mce:script> <BODY text = "#000000"> <form name = form1> <table border = 0 align = center width = "500"> <tr> <td colspan = 3 align = center bgcolor = white><font color = blue size = 6>输入窗口位置</font> </td></tr> <tr> <td width = "233"> <font size = "3">X坐标为</font>:<input type = text name = "X" style = "lightblue;color;blue"> </td></tr> <tr> <td width = "233"> <font size = "3">Y坐标为</font>:<input type = text name = "Y" style = "lightblue;color;blue"> </td> <td width = "133"> <input type = button value = "改变窗口位置" onclick = movewin(this.form) style = "background-color:lightgreen;color:blue"> </td> </tr> </table> </form> </BODY> </HTML> </span>
4.使用超时功能
使用window对象的setTimeOut方法，可以指定一个延时及延时之后开始执行的指令。调用setTimeOut()方法，即可启动一个超时功能。该方法有两个参数，第一个是在括号中的一条（或一组）Javascript语句，第二个是以毫秒（千分之一秒）为单位等待时间。举例来说，下面这条语句将在10秒后显示一个警示对话框。
ident = window.setTimeOut("alert('Time is up!')", 10000);
我们有时候会希望语句能够反复执行，如脚本可能用于更新时钟，需每秒更新一次。重复超时功能的方法是，在该超时期限调用的函数再次调用setTimeOut()方法。
示例：
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Timeout 使用方法 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var counter = 0; ID = window.setTimeout("Update();", 2000); function Update() { counter++; document.form1.input1.value = "The counter is now at " + counter; ID = window.setTimeout("Update();", 2000); } // --></mce:script> <BODY> <h1>Timeout 使用方法</h1> <hr><p> The text value below and the status line are being updated every two seconds.Press the RESET button to restart the count,or the STOP button to stop it. </p> <hr> <form NAME = "form1"> <input TYPE = "text" NAME = "input1" SIZE = "40"><br> <input TYPE = "button" VALUE = "RESET" onclick = "counter = 0;"><br> <input TYPE = "button" VALUE = "STOP" onclick = "window.clearTimeout(ID);"> </form> <hr> </BODY> </HTML> </span>
5.使用框架
5.1创建框架
<framset>用来定义一组框架或其它框架集，其属性如下：
Border 指定框架边框的宽度（以像素为单位）
frame border yes或1表示三维边框；no或0表示平面框架
Rows 指定在垂直方向上将窗口划分为几个框架以及每个框架的大小
Cols 指定在水平方向上将窗口划分为几个框架以及每个框架的大小
<frame>定义单个框架的属性
Name 框架名称，JavaScript通过名称来引用框架
Src 框架中显示内容的URL地址
Scrolling 默认auto表示浏览器必要时提供滚动，yes总显示滚动，no总不滚动
Marginwidth 指定框架内容里框架左右边界的距离，以像素为单位
Marginheight 指定框架内容以及框架上下边界的距离，以像素为单位
示例：
将窗口划分为两个框架：上框架占30%，下框架占70%。第一个文件定义框架的划分，第二个文件包含上框架定义的页面，第三个文件包含下框架的页面。
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 创建上下框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset rows = "30%,70%"> <frame src = "8-10上框架.html"> <frame src = "8-10下框架.html"> </frameset> <BODY> </BODY> </HTML> </span>
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 上框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = "red" > <h3> 上框架显示内容<br><br> </h3> <h2>兰溪</h2> </BODY> </HTML> </span>
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 下框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = "orange"> <h3> 下部框架显示内容 </h3> 兰溪春尽碧泱泱，<br> 映水兰花雨发香。<br> 楚国大夫憔悴日，<br> 应寻此路去潇湘。<br> </BODY> </HTML> </span>
5.2frame对象
在JavaScript中，HTML框架用一个frame对象数组frames[]表示。该数组是window对象的一个属性，每个数组元素表示一个框架，frames[1]代表<frameset>标记中的第二个框架，以此类推。引用方式为：
window.frames[i];
window.frames["frameName"];
window.frameName;
6.菜单设计
6.1创建菜单
在下面的示例中，使用框架将窗口分为两部分：左框架中显示一个链接组成的菜单，单击这些菜单时改变右框架中的背景颜色；右框架中显示一段唐诗和一段文字，用于演示菜单操作的结果。
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 菜单和导航条 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset cols = "20% , 80%"> <frame src = "8-12菜单.html" name = lframe> <frame src = "8-12导航.html" name = rframe> </frameset> <BODY> </BODY> </HTML> </span>
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 菜单 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- function setBgColor(color) { parent.frames[1].document.bgColor = color; } // --></mce:script> <BODY bgColor = "white"> <h3>请选择颜色：<br> <a href = "javascript:setBgColor('red')">红色</a><br> <a href = "javascript:setBgColor('blue')">蓝色</a><br> <a href = "javascript:setBgColor('yellow')">黄色</a><br> <a href = "javascript:setBgColor('green')">绿色</a><br> <a href = "javascript:setBgColor('white')">白色</a><br> </h3> </BODY> </HTML> </span>
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 右部框架-小诗 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY><center> <h1>山行</h1> 青枥林深亦有人，一渠流水数家分。<br> 山当日午回峰影，草带泥痕过鹿群。<br> 蒸茗气从茅舍出，缲丝声隔竹篱闻。<br> 行峰卖药归来客，不惜相随入岛云。<br> </center> </BODY> </HTML> </span>
6.2隐藏菜单
有时在选择菜单项后，需要将菜单隐藏起来，以提供更多的显示空间。
示例：
<span style="font-size: medium;"><HTML> <HEAD> <TITLE> 隐藏框架 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset cols = "110 , 460" rows = "*"> <frame src = "8-13菜单.html" name = "menu"> <frame src = "8-13主页.html" name = "main"> </frameset> <noframes> <body bgcolor = "white"> </BODY> </noframes> </HTML> </span>
<span style="font-size: medium;"><HTML> <HEAD> <TITLE> 菜单 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var myUrl; function openSite(url) { parent.main.location = url; myUrl = url; } function collapse() { if(!myUrl) { parent.location = "8-13主页.html"; } else { parent.location = myUrl; } } // --></mce:script> <BODY> <p><a href = "javascript:openSite('8-13主页.html')">主页</a><p> <p><a href = "javascript:openSite('http://www.google.com/');">google</a></p> <p><a href = "javascript:openSite('http://www.baidu.com/');">百度</a></p> <p><a href = "javascript:collapse();">隐藏菜单区</a><p> </BODY> </HTML> </span>
<span style="font-size: medium;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 主要内容 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY bgcolor = yellow> <h1>这是本站主页</h1> 青海长云暗雪山，古城要比玉门关。<br> 黄沙百战穿金甲，不破楼兰终不还。<br> </BODY> </HTML> </span>
7.screen对象
screen对象也是window对象的一个属性。当加载Web页面时自动创建screen对象。它给出了用户计算机中的各种显示特性，包括屏幕像素宽度、高度、颜色深度等。在设计对显示特性有特殊要求的网页时，screen对象就比较有用了，比如根据用户屏幕的大小调整页面上图像显示空间大小等。screen对象的属性如表所示：
availHeight 屏幕可用高度，以像素为单位
availWidth 屏幕可用宽度，以像素为单位
height 屏幕高度，以像素为单位
width 屏幕宽度，以像素为单位
colorDepth 颜色深度，使用像素位数表示
8.综合应用
为了加深对所学知识的理解，下面的例子使用了窗口的某些属性。代码执行后，会在3秒内探出对话框。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 停止周期执行代码 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <mce:script type="text/javascript"><!-- var time; var intervalid; function showName() { time = 3; myForm.showTime.value = time; intervalid = setInterval("setTime()", 1000); } function setTime() { time--; myForm.showTime.value = time; if(time ==0 ) { clearInterval(intervalid); alert("您的姓名为：" + myForm.myName.value); } } // --></mce:script> <BODY> <form name = "myForm"> 姓名：<input type = "text" name = "myName" value = "亚里士朱德"> <input type = "button" value = "确定" onclick = "showName()"><br> <input type = "text" name = "showTime" size = "1" value = "3">秒后弹出警告框 </form> </BODY> </HTML>