JavaScript学习(6)使用窗口和框架
2010-08-31 16:12
330 查看
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();
实例:
<!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>
2.窗口属性
本节主要讨论window的属性,下表列出了IE支持的window对象的属性
closed 表示窗口是否已经关闭
dafaultstatus 指定在浏览器窗口中底部状态栏中,显示的默认状态信息
frames window对象中包含的所有frame对象的数组
length 表示window对象中包含的帧的个数
location 表示与window对象相关的URL的地址
name 窗口标识
opener 标识打开窗口的window对象
parent “双亲”,与包含某个窗口的父窗口含义相同
self “窗口自身”,与引用的当前窗口含义相同
status 指定浏览器状态栏中出现的临时性信息
top 指一系列嵌套窗口中的最上层浏览器窗口
screen 存储窗口所在屏幕信息的子对象(分辨率等)
2.1closed属性
示例:
<!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>
2.2status属性
设置窗口的status属性是非常简单的事情,通常脚本语句作为事件处理定义中的内嵌脚本来运行。这对于短的脚本来说非常方便,因为不必说明一个单独的函数或在页面上加入<script>标记,仅仅需要把脚本语句加入<a>标记即可。
示例:
<!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>
2.3opener属性
许多脚本开发人员都有这样的一种错误想法,认为由window.open()方法创建的浏览器窗口有一个父子关系,正如一个框架与它的父亲框架一样。其实实际情况不是这样,新的浏览器窗口一旦创建,与它的源窗口只有很小的关系,即opener属性。该属性的目的在于为新窗口中的脚本提供一个有效地引用,使之回到源窗口中。
示例:
<!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>
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函数产生的信息框,但只含一个“确定”按钮。在执行该方法时,讲显示一条信息并将保持在屏幕上,脚本的执行过程被暂停,知道用户单击“确定”按钮。
示例:
<!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>
3.2confirm方法
confirm方法和alert方法很相似,它也是现实一个信息框,但这个信息框有两个按钮,分别为“确定”和“取消”。如果单击“确定”按钮,则confirm方法返回true;如果单击“取消”按钮,则返回false。
示例:
<!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>
3.3prompt()方法
prompt方法用来提示用户输入数据,它类似于inputbox函数。prompt()方法接受两个参数,其中一个是提示信息,另一个是可选的默认信息。执行该方法后显示一个对话框,让用户输入信息,输入后单击“确定”按钮,将返回用户在对话框输入的信息。
示例:
<!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>
3.4moveTo()方法
moveTo()方法和moveBy()方法的区别就在于一个是绝对运动,另一个是与当前窗口位置相关的相对运动。为moveTo制定的参数就是屏幕上窗口的左上角的横坐标和纵坐标;相反moveBy的参数表示在每个方向上要将窗口调整多远。
示例:
<!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>
4.使用超时功能
使用window对象的setTimeOut方法,可以指定一个延时及延时之后开始执行的指令。调用setTimeOut()方法,即可启动一个超时功能。该方法有两个参数,第一个是在括号中的一条(或一组)Javascript语句,第二个是以毫秒(千分之一秒)为单位等待时间。举例来说,下面这条语句将在10秒后显示一个警示对话框。
ident = window.setTimeOut("alert('Time is up!')", 10000);
我们有时候会希望语句能够反复执行,如脚本可能用于更新时钟,需每秒更新一次。重复超时功能的方法是,在该超时期限调用的函数再次调用setTimeOut()方法。
示例:
<!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>
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%。第一个文件定义框架的划分,第二个文件包含上框架定义的页面,第三个文件包含下框架的页面。
<!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>
<!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>
<!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>
5.2frame对象
在JavaScript中,HTML框架用一个frame对象数组frames[]表示。该数组是window对象的一个属性,每个数组元素表示一个框架,frames[1]代表<frameset>标记中的第二个框架,以此类推。引用方式为:
window.frames[i];
window.frames["frameName"];
window.frameName;
6.菜单设计
6.1创建菜单
在下面的示例中,使用框架将窗口分为两部分:左框架中显示一个链接组成的菜单,单击这些菜单时改变右框架中的背景颜色;右框架中显示一段唐诗和一段文字,用于演示菜单操作的结果。
<!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>
<!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>
<!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>
6.2隐藏菜单
有时在选择菜单项后,需要将菜单隐藏起来,以提供更多的显示空间。
示例:
<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>
<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>
<!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>
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>
相关文章推荐
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- javascript学习笔记之javascript嵌入html以及框架和窗口
- JavaScript学习笔记 5-DOM,窗口 和 框架
- Javascript学习之窗口与框架
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 子框架中使用javascript更改当前浏览器窗口的url
- javascript基础教程第8版---第5章窗口与框架---学习笔记
- 日志框架学习(5)— Spring中使用Log4j
- 【Cocos2d-X开发学习笔记】第07期:渲染框架之摄像机类(CCCamera)的使用
- 基于theano的深度学习框架Keras的使用
- [置顶] javascript正则表达式学习笔记之------正则表达式的创建和基本使用
- javascript Backbone框架学习
- javascript学习笔记(九):DOM操作HTML的各种方法使用
- 【Cocos2d-X开发学习笔记】第09期:渲染框架之菜单类(CCMenu)的使用
- JavaScript对框架窗口的控制
- yii 学习笔记二 、路由 及 yii框架模版使用
- 关于 javascript 窗口框架之间的函数调用
- 有关javascript模态窗口的使用
- javascript 在没有找到何时的脚本管理框架前, 使用如下方式在页面上使用脚本
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview