javascript 浏览器对象
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第十二章 JavaScript 的浏览器对象
12.1浏览器对象简介
我们在前面的学习中可以体会到，JavaScript 大多数操作需要使用对象，在网页的编程中也是如此。
当我们在浏览网页时，看到的是浏览器显示HTML 文档的一个窗口程序，Javascript 则将其看作一组对象的集合。
其中整个HTML 文档被称作文档对象（Document Object ），文档对象是整个浏览器对象的一部分。
这个浏览器对象的模型如下图所示。
12.2 window 对象
window 对象代表打开的浏览器窗口。
通过window 对象可以控制窗口的大小和位置、有窗口弹出的对话框、打开窗口与关闭窗口，还可以控制窗口上是否显示地址栏、工具栏和状态栏等栏目。
12.2.1 window 对象的属性和方法
顶层window 对象是所有其他子浏览器对象的父对象，它出现在每一个页面上，并且可以在单个JavaScript 应用程序中被多次使用。
window 对象的常用属性见下表。
window 对象的常用属性
window
document
anchor frames
history
location
navigator
Object
Array
form image
link
location
screen
属性说明
document 表示浏览器窗口中的HTML文档
frames 表示当前对话框中所有iframe对象的集合，
可通过iframe的名称访问，如
frame["name"]；或通过集合下标访问，如
frames[0]、frames[1]
history 有关客户访问过的URL信息
location 指定当前文档的URL
navigator 表示浏览器对象，用于获得与浏览器相关的
信息
opener 返回对创建此窗口的窗口引用
parent 表示包含当前窗口的父窗口
screen 有关客户端的屏幕和显示性能的信息
self 返回对当前窗口的引用
status 设置窗口状态栏的文本信息
top 表示最顶层的浏览器对象
除了属性之外，window对象还拥有很多方法。
window对象的常用方法见下表。
window对象的常用方法
方法名称说明
alert（"提示信息"）显示带有一段消息和一个确认按钮的警告框prompt（"提示内容"，"初始值"）显示可提示用户输入的对话框
confirm（"提示信息"）显示带有一段消息以及确认按钮和取消按钮
的对话框
open("url"，"name"，"窗口特征") 打开具有指定名称的新窗口，并加载给定URL
所指定的文档；如果没有提供URL，则打开一
个空白文档
showModalDialog() 在一个模式窗口中显示指定的HTML文档close() 关闭浏览器窗口
moveBy(x,y) 相对窗口的当前坐标把它移动指定的距离moveTo(x,y) 把窗口的左上角移动到一个指定的坐标（x
水平，y垂直）
resizeBy(x,y) 按照指定的量x(宽度),y(高度)调整窗口，单
位为像素
resizeTo(x,y) 把窗口的大小调整到指定的宽度和高度（单
位为像素）
setInterval("函数",timer) 按照指定的周期timer(以毫秒计)来调用函
数
setTimeout("函数",timer) 在指定的timer(毫秒数)后调用函数
12.2.2 window对象的使用
可以使用window对象调用其方法和属性，语法如下：
window.属性名
window.方法名（参数列表）
window是不需要使用new运算符来创建的对象。
因此，在使用window对象时，直接用“window”来引用window对象即可，代码如下：
window.alert("字符串");
在实际应用中，JavaScript允许使用一个字符串来给窗口命名，也可以使用一些关键字来代替某些特定的窗口。
例如，使用“self”代表当前窗口，“parent”代表父级窗口等。
对于这种情况，可以用这些字符创来代表“window”。
语法如下：
self.属性名
parent.方法名（参数列表）
12.2.3信息对话框
JavaScript与浏览用户交互有很多方法，我们学习比较常用的3种方法，可以用来创建不同的对话框。
分别为警告对话框（alert方法）、确认对话框（confirm（）方法）和提示对话框（prompt（）方法）。
相对于write()方法属于document对象，这3种方法属于window 对象，所以它们不会对HTML文档产生影响。
Window对象的方法在编写代码时可直接使用，即window对象可以省略。
1、警告对话框
在页面显示时弹出警告对话框由window对象的alert()方法实现，并且在警告框内可以显示提示字符串文本。
alert()方法将独立生成一个小窗口，显示一个“确定”按钮和信息内容。
此方法的语法如下：
window.alert(信息内容);或者alert(信息内容);
信息内容可以是已定义变量、文本字符串或者是表达式等。
当信息内容传入时，最终将信息内容的类型强制转换为字符串后，再进行输出。
用户可以单击警告对话框中的“确定”按钮来关闭该警告对话框。
不同浏览器的警告对话框样式可能会有些不同。
在浏览器打开时，弹出警告对话框。
例12-1：在浏览器打开时，弹出警告对话框
<html>
<head>
<title>在浏览器打开时，弹出警告对话框</title>
<script type="text/javascript">
function myalert(){
alert("弹出警告对话框");
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body onload = "myalert()">
此页面演示警告对话框的使用
</body>
</html>
！注意
警告对话框由当前运行的页面弹出，在对该对话框进行处理前，不能对当前页面进行操作，并且其后面的代码不会被执行。
只有将警告对话框进行处理后（如单击“确定”按钮或关闭对话框），才可以对当前页面进行操作，后面的代码也才能继续执行。
2、确认对话框
利用window对象的confirm()方法可以在浏览器窗口中弹出一个确认对话框。
在确认对话框内显示提示字符串，当用户单击“确定”按钮时该方法返回true，单击“取消”按钮时返回false。
该方法语法如下：
window.confirm(对话框提示文字内容);或confirm(对话框提示文字内容)
类似于alert()方法，confirm()方法只接收1个参数，并转换为字符串值显示。
JavaScript程序可使用判断语句对结果作出不同处理，以达到显示不同结果的目的。
例12-2：确认对话框的应用
<html>
<head>
<title>确认对话框的应用</title>
<script type="text/javascript">
function change(){
var myconfirm = confirm("改变字体样式吗？\n如果选择‘确定’，将加粗字体。
\n如果选择'取消'，将不改变");
if(myconfirm ==true){
document.getElementById("info").style.fontWeight ="bold";
document.getElementById("info").value ="字体加粗";
}
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body>
<input type = "text"id = "info"value = "字体不加粗">
<input type = "button"value = "改变字体样式"onclick = "change()"/>
</body>
</html>
3、提示对话框
利用window对象的prompt()方法可以在浏览器窗口中弹出一个提示框。
它与警告框和确认对话框不同，在提示框中有一个输入框，在输入框内显示提示字符串，，并等待用户输入。
当用户在该输入框输入文字后，单击“确定”按钮时，返回用户输入的字符串；当单击“取消”按钮时，返回null值。
该方法语法如下：
window.prompt(提示文本内容，文本输入框默认文本);或prompt(提示文本内容，文
本输入框默认文本);
可见，prompt()方法需要输入两个参数，第二个参数是可选的。
和confirm()方法不同，prompt()方法只返回一个值。
例12-3：提示对话框的应用
<html>
<head>
<title>提示对话框的应用</title>
<script type="text/javascript">
function myprompt(){
var name = prompt("请问，你叫什么名字？","请输入姓名");
document.write("你的名字："+name+"<hr/>");
var teacher = prompt("请问，你最喜欢的老师是谁？","");
document.write("喜欢的老师："+teacher+"<hr/>");
var course = prompt("请问，你最喜欢哪门课程？","");
document.write("喜欢的课程："+course+"<hr/>");
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body onload = "myprompt()">;
</body>
</html>
12.2.4延时执行命令
在以前的许多示例中，经常使用按钮被单击后执行函数的方法，类似于用户给JavaScript解释器发出命令的按钮。
不过这些命令往往“一触即发”，在某些时候，用户希望发出命令后等候一段时间再执行，这可以使用window对象的setTimeout()方法完成此功能。
Window对象提供setTimeout()方法用于设置某些函数的超时，即在设定的时间到来时触发某指定的函数。
它是一个内部的JavaScript方法，该方法的实际应用有警告框的显示时间和状态栏的跑马灯效果和打字效果等。
其语法如下：
var timerID = setTimeout(函数，延时时间);
函数参数即为所调用的函数名称，延时时间为等待多久后开始执行函数，以毫秒（ms）为单位（1000毫秒等于1秒）。
setTimeout()方法返回一个内部直timerID，为该函数延时的引用变量名，可以在需要清除函数时引用。
同时，window对象提供clearTimeout()方法来执行清除操作。
该方法语法如下：
claerTimeout(timerID);
该方法接受唯一的参数timerID指定要清除的函数的引用变量名，方法执行后将该函数超时设置为失效。
例12-4：函数延时控制的应用
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>函数延时控制的应用</title>
<script type="text/javascript">
var seq =0;
var timerID;
var interval =120;
var MyStatus ="欢迎来到重庆理工大学计算机学院 ";
var strLength = MyStatus.length;
function myScroll(){
window.status = MyStatus.substring(0,seq+1);
seq++;
if(seq>=strLength){
seq =0;
window.status ="";
}
timerID = setTimeout("myScroll();",interval);
}
function myStopScroll(){
clearTimeout(timerID);
window.status ="停止打字";
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body onload = "window.status = '原始状态！'">
<br>
<center>
<p>单击对应的按钮，实现状态栏打字效果的显示与停止！</p>
<form name = "MyForm">
<input type = "button"value = "开始状态栏打字"onclick = "myScroll()">
<br >
<input type = "button"value = "停止状态栏打字"onclick = "myStopScroll()"> <br>
</form>
</center>
</body>
</html>
该实例演示了window对象的setTimeout()和clearTimeout()方法的使用情况，如果要更改打字效果中字符出现的速度，只需修改timeID = setTimeout("myScroll();",interval)语句里面的间隔时间interval即可实现。
12.2.5设定时间间隔
setTimeout()方法只能让代码在延迟一定时间后执行，并不能让代码反复执行。
如果要让代码反复执行，就需要使用window对象的setInterval()方法。
它用于设定时间间隔，用于按照某个指定的时间间隔去周期触发某个时间，典型的应用如动态状态栏、动态显示当前时间等，该方法的语法如下：
var timerID = setInterval(函数，间隔时间)
间隔的时间，以毫秒（ms）为单位。
设定时间间隔的操作完成后，返回该时间间隔的引用变量timerID，用于清除函数时引用。
同时，window对象提供clearInterval()方法用于清除该间隔定时器，使函数的周期触发失效，该方法语法如下：
clearInterval(timerID)
该方法接受唯一的参数timeID，指明要清除的间隔时间引用变量名。
下面的事例演示了如何使用定时器，设定和停止动态状态栏。
例12-5：定时器的应用
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>定时器的应用</title>
<script type="text/javascript">
var timerID;
var dir =1;
var str_num =0;
var str ="欢迎来到重庆理工大学计算机学院 ";
function startStatus(){
var str_space ="";
str_num = str_num+1*dir;
if(str_num>30||str_num<0){
dir =1*dir;
}
for(var i=0;i<str_num;i++){
str_space+="";
}
window.status = str_space+str;
}
function myStart(){
timerID = setInterval("startStatus();",3000);
}
function myStop(){
clearInterval(timerID);
window.status ="停止滚动！ ";
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body onload = "window.status='原始状态！'">
<br>
<center>
<p>单击对应的按钮，实现动态状态栏的滚动与停止！</p>
<form name = "MyForm">
<input type = "button"value = "开始状态栏滚动"onclick = "myStart()"> <br>
<input type = "button"value = "停止状态栏滚动"onclick = "myStop()"> <br>
</form>
</center>
</body>
</html>
该示例演示了window对象的setInterval()和clearInterval()方法的使用，如果要更改滚动的速度，只需修改timeID = setInterval("startStatus();",3000)语句里面的间隔时间“3000”即可实现。
12.2.6窗口的打开和关闭
窗口的打开和关闭主要由open()和close()方法来实现，也可以在打开窗口时指定窗口的大小及位置。
我们在下面进行详细的介绍.
1、打开窗口
弹出新窗口在网页中很常见，可以用window对象的open()方法打开一个新的窗口。
我们只要合理设置参数，可以指定打开窗口的URL地址、名称和大小等。
语法如下：
var myWin = window.open("打开窗口的URL地址"，"窗口名称","窗口特征")；
其中myWin为当前打开窗口的句柄。
如果open()方法成功，则myWin的值为一个window 对象的句柄；否则，myWin的值是一个空值。
如果URL地址是一个空字符串，则浏览器将打开一个空白窗口。
新窗口的特征非常多，可选择适当的属性进行设置。
窗口特征属性见下表：
窗口特征属性
特征名称说明
height 窗口的高度，单位为像素
width 窗口的宽度，单位为像素
location 是否显示地址栏，yes或1为是，no或0为
否
menubar 是否显示菜单栏，yes或1为是，no或0为
否
resizable 是否允许改变窗口的大小，yes或1为是，no
或0为否
scrollbars 是否显示滚动条，yes或1为是，no或0为
否
toolbar 是否显示工具栏，yes或1为是，no或0为
否
status 是否显示状态栏，yes或1为是，no或0为
否
top 窗口顶部与屏幕最顶部的距离，单位为像素left 窗口左端与屏幕最左端的距离，单位为像素
例12-6：打开新窗口
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>打开新窗口</title>
<script type="text/javascript">
function newWin(){
var myWin =window.open("new.html","new","location = no,menubar = no,status = no,toolbar = no,sscrollbars = yes,width = 450,height = 150,resizable = no");
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body>
<input type = "button"value = "打开新窗口"onclick = "newWin()"/>
</body>
</html>
2、关闭窗口和刷新父窗口
利用window对象的close()方法可以关闭当前窗口，返回一个窗口对象。
使用该方法语法如下：
window.close();
关闭当前窗口，也可以使用如下方式实现。
例如：
window.close();
close();
this.close();
关闭弹出窗口时刷新父窗口，也就是关闭子窗口时自动刷新父窗口中的内容。
当用户通过window对象的open()方法打开一个新窗口(子窗口)，在新窗口中进行关闭操作后，关闭子窗口的同事刷新父窗口来实现更新页面的内容。
例12-7：关闭弹出窗口刷新父窗口
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>父窗口</title>
<script type="text/javascript">
function newWin(){
var myWin = window.open("new.html","new","location = no,menubar = no, status = no,toolbar = no,scrollbars = yes,width = 450,height = 150,resizable = no");
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
var time =new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
document.write("当前时间："+hour+":"+minute+":"+second);
</script>
<input type = "button"value = "打开新窗口"onclick = "newWin()"/>
</body>
</html>
new.html代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>新窗口</title>
<script type="text/javascript">
function closeWin(){
window.opener.location.reload();//刷新父窗口中的页面
window.close();//关闭当前窗口
}
</script>
</head>
<body>
关闭当前窗口并刷新父窗口
<input type="button" value="关闭当前窗口" onclick="closeWin()"/>
</body>
</html>
12.2.7弹出网页模式对话框
在实际的应用中，有时需要弹出网页模式对话框。
它在父窗口上，即必须关闭子窗口后才能访问父窗口。
否则，不能访问父窗口。
利用window对象的showModalDialog()方法，可以弹出网页模式对话框。
该方法语法如下：
window.showModalDialog("打开对话框的URL"，传递的参数，"对话框特征");
向页面对话框传递参数，传递参数的类型不限（如字符串、数组等）。
对话框通过window 对象dialogArguments属性来取得传递进来的参数。
传递参数不是必须的，这可以根据实际应用而定。
对话框的常见特征属性见下表：
对话框的特征属性
特征名称说明
dialogHeight 对话框的高度
dialogWidth 对话框的宽度
center 窗口是否居中，yes或1为是，no或0为否。
默认为yes
resizable 是否允许改变对话框窗口的大小，yes或1
为是，no或0为否
scroll 是否显示滚动条，yes或1为是，no或0为
否
status 是否显示状态栏，yes或1为是，no或0为
否
dialogTop 对话框窗口与屏幕最顶部的距离，单位为像
素
dialogLeft 对话框窗口与屏幕最左端的距离，单位为像
素
例如，弹出一个模式对话框的语句如下：
window.showModalDialog("newDialog.html",window," dialogWidth = 450px;dialogHeight = 150px;status = no;scroll = no");
第二个参数window代表把自己的window对象传到模态子窗体中。
dialogWidht = 450px 表示模态对话框的宽度，dialogHeight = 150px表示模态对话框的高度，status=no表示无状态栏，scroll=no表示无滚动条。
其中多个对话框特征属性用分号“；”隔开，可用1代替yes，用0代替no。
在定义模态对话框时，用px做单位。
12.3 history和location对象
12.3.1 history对象
利用history对象实现访问窗口历史，history对象存储了最近所访问网页的URL地址列表。
它多用于操作浏览器的“前进”和“后退”，与浏览器本身的“前进”和“后退”功能一直。
history对象在处理历史URL地址列表并进行站点页面导航方面有着广泛的应用。
history对象的常见方法见下表：
history对象的常用方法
方法名称描述
back() 退回前一页
forward() 重新进入下一页
go("url"|num) 加载被指定的URL，或跳到指定的页面数
history对象的back()方法相当于浏览器的“后退”按钮，forward()方法相当于浏览器的“前进”按钮，代码如下：
<a href = "javascript:window.history.forward();">前进</a>
<a href = "javascript:window.history.back();">后退</a>
还可以使用history.go(x)方法指定要访问的历史记录。
若x参数为正，则向前移动；若x参数为负数，则向后移动；x为0表示重新加载本页。
页面代码如下：
<a href = "javascript:window.history.go(-1);">后退</a>
<a href = "javascript:window.history.go(1);">前进</a>
<a href = "javascript:window.history.go(0)">刷新</a>
<a href = "javascript:window.history.go(2)">前进两次</a>
使用history的length属性能够访问history数组的长度，可以很容易的转移到列表的末尾。
例如：
<a href = "javascript:window.history.go(window.history.length-1);">
末尾
</a>
12.3.2 location对象
window对象使用locaction属性引用location对象，此对象相当于浏览器中的地址栏，包含了关于当前URL地址的信息，它提供了一种重新加载窗口当前URL的方法。
location对象的常见属性
属性说明
host 设置或返回URL的主机名和端口号。
如
:80
hostname 设置或返回URL的主机名部分。
如
href 设置或返回完整的URL字符串。
如
/index.html
location对象的常见方法见下表
方法名称说明
assign("url") 加载URL指定的新的HTML文档
reload() 重新加载（刷新）当前页面
replace("url") 通过加载URL指定的文档来替换当前文档12.3.3自定义导航控制面板示例
在实际应用中，有时需要创建一个自定义导航控制面板。
通过该面板可以直接进行相关功能的操作，单击网页中的“前进”和“后退”按钮可以实现不同页面的切换显示。
例12-8：自定义导航控制面板
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>自定义导航控制面板</title>
<script type="text/javascript">
function display(index){
switch(index){
case1:
window.frames["show"].location.href ="a.html";
break;
case2:
window.frames["show"].location.href ="b.html";
break;
case3:
window.frames["show"].location.href ="c.html";
break;
}
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3"> <meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body>
<a href = "javascript:history.forward()">前进</a>
<a href = "javascript:history.back()">后退</a>
<a href = "javascript:history.go(0)">刷新</a>
<p>
<input type = "button"value = "第一个页面"onclick = "display(1)"/> <input type = "button"value = "第二个页面"onclick = "display(2)"/> <input type = "button"value = "第三个页面"onclick = "display(3)"/> </p>
<iframe src = "a.html"name = "show"/>
</iframe>
</body>
</html>
12.4 Screen对象
screen对象在加载HTML文档时自动创建，用于存储浏览者系统的显示信息，如屏幕的分辨率和颜色深度等。
其常用的属性见下表：
screen对象常用的属性
属性说明
availHeight 返回显示屏幕的可用高度（不包含任务栏）availWidth 返回显示屏幕的可用宽度
width 屏幕的宽度
height 屏幕的高度
colorDepth 返回目标设备或缓冲器上的调色板的比特深
度
screen对象常用于判断浏览者的系统显示设置，以显示不同的内容。
例12-9：输出屏幕信息
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>对象的使用</title>
<script type="text/javascript">
function display(x){
var txt;
switch(x){
case1:
txt = screen.height+"像素";
break;
case2:
txt = screen.width+"像素";
break;
case3:
txt = screen.availHeight+"像素";
break;
case4:
txt = screen.availWidth+"像素";
break;
case5:
txt = screen.colorDepth+"位";
break;
default:
txt ="您的屏幕信息";
}
document.getElementById("txt").value = txt;
}
</script>
<meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
<meta http-equiv="description"content="this is my page">
<meta http-equiv="content-type"content="text/html; charset=UTF-8"> </head>
<body>
<input type = "text"id = "txt"value = "您的屏幕信息"/><hr/>
<input type = "button"value = "屏幕高度"onclick = "display(1);"/>
<input type = "button"value = "屏幕宽度"onclick = "display(2);"/>
<input type = "button"value = "屏幕可用高度"onclick = "display(3);"/> <input type = "button"value = "屏幕可用宽度" onclick = "display(4);"/> <input type = "button"value = "屏幕颜色深度"onclick = "display(5);"/> </body>
</html>。