window对象

实验目的

1、理解JavaScript中BOM编程和window对象的概念。
2、掌握JavaScript中window对象常见方法open()、close()、focus()、blur()、setInterval()、clearInterval()、setTimeout()、clearTimeout()和print()等的使用技巧以及常用属性status、defaultstatus、opener、closed和name 等属性的使用。
3、掌握JavaScript中location对象的hash、host、hostname、href等属性的使用方法以及常用方法reload()、replace()的使用技巧。
3、掌握JavaScript中history对象的lengt属性和back()、forward()方法、go()方法的使用技巧。
4、了解JavaScript中screen对象和navigator对象的常见方法和属性的使用。

实验环境

1、硬件环境：i386兼容机，2G剩余硬盘空间。
2、软件环境：Windows XP以上兼容系统
3、使用资源：开发环境Dreamweaver CS6

实验步骤

8.1 BOM对象概述

浏览器对象模型 (BOM)：由一组浏览器对象组成。 由于现代浏览器已经（几乎）实现了Java Script交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

对象 具 体 描 述
Window BOM结构的最顶层对象，表示浏览器窗口
Document 用于管理HTML文档，可以用来访问页面中的所有元素
Frames 表示浏览器窗口中的框架窗口。Frames是一个集合，例如Frames[0]表示窗口中的第1个框架
History 表示浏览器窗口的浏览历史，就是用户访问过的站点的列表
Location 表示在浏览器窗口的地址栏中输入的URL
Navigator 包含客户端浏览器的信息
Screen 包含客户端显示屏的信息

8.2 Window对象

8.2.1 Window对象的基本属性

属 性 具 体 描 述
closed 返回窗口是否已被关闭
defaultStatus 设置或返回窗口状态栏中的默认文本
document 对document对象的只读引用，表示窗口中的文档
history 对History对象的只读引用。表示窗口的浏览历史记录
innerheight 返回窗口的文档显示区的高度
innerwidth 返回窗口的文档显示区的宽度
location 对location对象的引用,表示在浏览器窗口的地址栏中输入的URL
name 设置或返回窗口的名称
Navigator 对Navigator对象的只读引用。表示客户端浏览器的信息
opener 返回对创建此窗口的窗口的引用
outerheight 返回窗口的外部高度
outerwidth 返回窗口的外部宽度
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置
parent 返回父窗口
Screen 对 Screen 对象的只读引用，表示客户端显示屏的信息
self 返回对当前窗口的引用
status 设置窗口状态栏的文本
top 返回最顶层的先辈窗口
window 等价于 self 属性，它包含了对窗口自身的引用
screenLeft /screenX 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标
screenTop / screenY 只读整数。声明了窗口的左上角在屏幕上的的 y 坐标

8.2.1 Window对象的属性

1、关闭、打开等属性
opener属性：可读可写的属性，可返回对创建该窗口的Window对象的引用。创建的窗口可以引用创建它的窗口所定义的属性和函数。
语法：Window对象名.opener
提示：只有表示顶层窗口的Window对象的operner属性才有效，表示框架的Window对象的operner属性无效。
closed属性：只读，判断窗口是否已被关闭并返回true或false。当浏览器窗口关闭时，表示该窗口的 window对象并不会消失，它将继续存在，不过它的closed属性将设置为true。
语法：window对象名.closed

除了创建时明确指定不使用状态栏的浏览器，在每个浏览器窗口底部都有一个状态栏，这是浏览器向用户显示消息的地方。
在JavaScript程序中同样可利用状态栏，它的内容是由Window对象的两个属性控制的，即defaultStatus、status。
2、defaultStatus和status属性
status属性：设置窗口状态栏的文本，主要用于显示瞬时消息。
语法：Window对象名. status=str;

defaultStatus属性：设置或返回窗口状态栏中的默认文本，可用于显示一些非瞬时的消息，如欢迎消息等
语法：Window对象名. defaultStatus=str;
提示：该属性可在鼠标移动到一个超链接或浏览器的控制按钮上时暂时地被URL、上下文帮助消息或其它的瞬时文本所代替，但是当鼠标离开那些区域时，又会恢复到默认的文本。

3、宽度和高度属性
innerheight、innerwidth属性：只读属性，分别声明了窗口的文档显示区的高度和宽度(不包括菜单栏、工具栏以及滚动条等)，以像素计。
IE不支持这些属性，它用document.body或document.
documentElement的clientWidth和clientHeight属性替代
outerwidth和outerheight属性：只读的整数，分别声明了整个窗口的宽度和高度。
语法：window.outerwidth=pixels window.outerheight=pixels
提示：IE 不支持此属性，且没有提供替代的属性。

4、位置坐标属性
pageXOffset属性：设置或返回当前页面相对于窗口显示区左上角的X位置。
pageYOffset属性：设置或返回当前页面相对于窗口显示区左上角的Y位置。
screenLeft/screenX属性：只读整数。声明了窗口的左上角在屏幕上的的x坐标
screenTop/screenY属性：只读整数。声明了窗口的左上角在屏幕上的的y坐标

8.2.2 Window对象的基本方法

1、新建窗口的Window.open()方法
作用：该方法可在当前网页中弹出新的窗口。
语法：窗口对象=Window.open([网页地址,窗口名,窗口特性]);
窗口名可以是有效的字符串或HTML保留的窗口名，例如"_self"、"_top"、"_parent"和"_blank"。
窗口特性的格式为“特性名1=特性值1;特性名2=特性值2;……特性名n=特性值n”的字串。

2、关闭窗口的Window.close()方法
作用：用于关闭有Window指定的顶层浏览器窗口。
语法： Window.close();
说明：某个窗口可以通过调用self.close()或只调用close()来关闭其自身。
只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭。这阻止了恶意的脚本终止用户的浏览器。

3、setInterval()和clearInterval()方法
作用：setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的 ID 值可用作clearInterval()方法的参数。
语法：setInterval(code,millisec[,“lang”])
参数：code必需，要调用的函数或要执行的代码串
millisec必须，周期性执行或调用code的时间间隔，以毫秒计。
返回值：一个可以传递给Window.clearInterval()从而取消对code的周期性执行的值。
作用：clearInterval()方法可取消由setInterval()设置的timeout。
语法:clearInterval(id_of_setinterval)
参数:id_of_setinterval 由setInterval()返回的ID值。

4、setTimeout()和clearTimeout()方法
作用：setTimeout ()方法可用于在指定的毫秒数后调用函数或计算表达式。
语法： setTimeout(code,millisec[,“lang”])
参数：code必需，要调用的函数或要执行的代码串
millisec必须，在执行代码前需等待的毫秒数。
返回值：一个可以传递给Window. clearTimeout()从而取消对code的延迟执行的值。
注意：该方法只执行code一次。如需多次调用，请使用setInterval()或者让code自身再次调用setTimeout()
作用：clearTimeout()方法可取消由setTimeout()方法设置的timeout。
语法:clearTimeout(id_of_setinterval)
参数:由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块。

5、focus()和blur()方法
作用：focus()方法可把键盘焦点给予一个窗口，即将被引用的对话框放在所有打开对话框的前面。
语法：Window.focus()
作用：blur()方法可把键盘焦点从顶层窗口移开，将被引用的对话框放在所有打开对话框的后面。
语法：Window.blur()
注意：在某些浏览器上，该方法可能无效。

6、print()方法
作用：用于打印当前窗口的内容。调用该方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。
语法：Window.print()

8.3 Location对象

8.3.1 Location对象的属性

Location对象包含有关当前URL的信息，可控制浏览器的走向，确定将要访问的站点。
该对象的主要属性如下表所示，Location对象Window对象的一部分，可通过 Window.location属性来访问。

8.3.2 Location对象的href属性
作用：href属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整URL。我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL的内容。语法：location.href=URL
说明：Location对象存储在Window对象的location属性中，表示那个窗口中当前显示的文档的web地址。

8.3.3 对象的href属性总结
JavaScript中包含href属性的对象：
window.location.href：设置或显示当前页面完整URL
document.location.href：设置或显示当前页面完整URL，document.href没有这个属性。
document.URL取值时等价于window.location.href或 document.location.href。在某些浏览器中通过对 document.URL赋值来实现页面跳转，但某些浏览器中不行。
Anchor对象(或Area对象)的 URL 属性:设置或显示文档中的超链接
8.3.4 Location对象的hash属性
作用：hash属性是一个可读可写的字符串，该字符串是URL的锚部分（从#号开始的部分）。
语法：location.hash=anchorname
如下例所示：点击设定锚点链接 按钮，浏览器地址栏的URL将加上#go，而页面也将跳转到go这个锚链接部分。如果原来的URL中有锚链接，则原来的锚链接将被替换成新设定的锚链接。

8.3.5 Location对象的其他属性
host属性是一个可读可写的字符串，可设置或返回当前URL的主机名称和端口号。
hostname属性是一个可读可写的字符串，可设置或返回当前URL的主机名。
pathname属性是一个可读可写的字符串，可设置或返回当前URL的路径部分。
port属性是一个可读可写的字符串，可设置或返回当前URL的端口部分。
protocol属性是一个可读可写的字符串，可设置或返回当前URL的协议。
search属性是一个可读可写的字符串，可设置或返回当URL的查询部分（问号 ? 之后的部分）。

8.3.6 Location对象的assign()方法
作用：assign()方法可加载一个新的文档。
语法：location.assign(URL)

8.3.7 Location对象的reload()方法
作用： reload()方法用于重新加载当前文档。
语法： location.reload(force)
说明：若该方法的参数是false或无参数，它就会检测服务器上的文档是否已改变。若已改变，则reload()会再次下载该文档；若未改变，则从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。若参数为true，则从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift健的效果是完全一样。

8.3.8 Location对象的replace()方法
作用： replace()方法可用一个新文档取代当前文档。
语法： location.replace(newURL)
说明：replace() 方法不会在History对象中生成一个新的记录。当使用该方法时，新的URL将覆盖History对象中的当前记录。

8.4 History对象

History对象包含用户(在浏览器窗口中)访问过的URL。
History对象是window对象的一部分，可通过window.history 属性对其进行访问。

8.4.2 History对象的length属性
定义：length属性声明了浏览器历史列表中的元素数量。IE 6和Opera 9以0开始，而Firefox 1.5 以1开始。
语法：history.length

8.4.3 History对象的back()方法
定义：可加载历史列表中的前一个URL(若存在)。
作用：等价于点击后退按钮或调用history.go(-1)。
语法：history.back()

8.4.4 History对象的forward()方法
定义：可加载历史列表中的下一个URL(若存在)。
作用：等价于点击后退按钮或调用history.go(-1)。
语法：history. forward()

8.4.5 History对象的go()方法
定义：可加载历史列表中的某个具体的页面。
语法：history.go(number|URL)
说明：URL参数使用的是要访问的URL，或URL的子串。 numbe参数使用的是要访问的URL在 History的URL列表中的相对位置。

8.5 screen对象

8.5.1 screen对象的基本属性
screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设置

8.5.2 screen对象的作用
每个window对象的screen属性都引用一个screen对象。 screen对象中存放着有关显示浏览器屏幕的信息。JavaScript程序将利用这些信息来优化它们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用16位色还是使用8位色的图形。另外，JavaScript程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

8.6 navigator对象

Navigator对象包含有关浏览器的信息。
1、Navigator对象集合：plugins[]。
返回对文档中所有嵌入式对象的引用。该集合是一个Plugin对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in对象提供的是有关插件的信息，其中包括它所支持的MIME类型的列表。
2、 Navigator对象的方法

3、Navigator对象的属性
Navigator对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

建议练习：

第一题：
1、在<head></head>插入JS代码块，编写一个计时器函数timedCount ()。
2、设置一个变量用来存放跳转等待时间，如果时间大于0，则通过setTimeout("dpURL(url)",1000)的方法，让时间进行自减。
3、将自减的结果通过getElementById("time").innerHTML显示出来。
4、如果等待时间为0，则跳转到目的网页。
第二题：
编写单击“跳转”按钮时调用的函数，通过Location对象的assign()或replace()方法，打开目的网页。