转自:http://www.cnblogs.com/shipfi/archive/2009/10/01/1577273.html
感觉这篇文章总结的很好就转过来了
7.1 浏览器环境
在客户端Javascript中,表示HTML文档的是Document对象,Window对象代表显示该文档的窗口。
Window对象是客户端编程中的全局对象。Javascript每一个实现都有一个全局对象,对象位于作用链的头部。这个全局对象的属性也就是全局变量。客户端Javascript的Window对象是全局对象,它定义了大量的属性和方法,使用户可以对浏览器的窗口进行操作。
它定义了引用其它重要对象的属性,如Document对象的document属性,Screen对象的screen属性。。。
它还有两个自我引用属性:window和self,可以使用这两个变量来引用Window自身。
一个详细的客户端对象层次和文档对象模型(DOM)图见图13-1
7.2 文档对象模型(DOM)简介
Window对象是客户端Javscript中的一个关键对象,其它所有的客户端对象都通过这个对象访问。
Window对象定义了一个document属性,该属性引用与这个窗口关联在一起的Document对象。
location属性引用与窗口关联在一起的Location对象。
如果Web浏览器是一个带帧的文档,则顶层的Window对象的frames[]数组包含了对代表帧的Window对象的引用。
(window.)frames[1].document -> 引用的是当前窗口第二个子帧的Document对象。
(window.)document.forms[0] -> 访问当前页面的第一个Form表单
parent.frames[0].document.forms[0].elements[3].options[2].text -> 当前文档第一个Form表单第四个输入域第三个选项的值。
7.3 计时器
Javascript提供了全局函数setTimeout() / clearTimeout() / setInterval() / clearInterval()来进行指定时间的函数调用。
setTimeout() : 安排一个函数在指定的毫秒过去后运行。
clearTimeout() : 取消setTimeout()指定函数的执行。
setInterval() : 安排一个函数在一个指定的毫秒间隔内重复的调用。
clearInterval() : 取消setInterval()函数的执行。
7.4 Location对象
窗口的location属性引用的就是Location对象,它代表窗口中当前显示的文档URL
● location.href属性
Location对象的href属性是一个字符串,表示的是URL的完整文本,因为Location对象的toString()方法返回的就是href属性的值,所以,也可以直接使用location表示location.href
● location.search属性
search属性包含的是URL中?之后的那部分URL,通常是某种类型的查询字符串。
以下代码通过getArgs来获得URL后?后各个节。
Location 对象属性
设置或返回从井号 (#) 开始的 URL(锚)。
|
4
|
1
|
9
| |
设置或返回主机名和当前 URL 的端口号。
|
4
|
1
|
9
| |
设置或返回当前 URL 的主机名。
|
4
|
1
|
9
| |
设置或返回完整的 URL。
|
4
|
1
|
9
| |
pathname
|
设置或返回当前 URL 的路径部分。
|
4
|
1
|
9
|
设置或返回当前 URL 的端口号。
|
4
|
1
|
9
| |
设置或返回当前 URL 的协议。
|
4
|
1
|
9
| |
设置或返回从问号 (?) 开始的 URL(查询部分)。
|
4
|
1
|
9
|
编辑本段Location 对象方法
加载新的文档。
|
4
|
1
|
9
| |
reload()
|
重新加载当前文档。
|
4
|
1
|
9
|
replace()
|
用新的文档替换当前文档。
|
4
|
1
|
9
|
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/eec4c0236afc26744c9c4e910bc34958.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
上面代码第10行在JS1.5外使用的是args[argname]=unescape(value);
● 载入新文档
可以给location属性赋值一个字符串,浏览器会把它解释为一个URL,并且试图用这个URL载入和显示文档。
if (!document.getElementById)
location = "staticpage.html";
★ 最后,要注意不要混淆Window对象的location属性和document中的location属性。前者是一个Location对象,后者只是一个只读字符串,并不具有Location对象的任何特性。document.location与document.href是同义的。★
7.5 History对象
Window对象的history属性是该窗口的History对象。另外注意的是:脚本不能像数组一样访问history属性中的元素
History对象支持三种属性:back() / forward() / go()
● back()和forward()属性 :在窗口中向前后移动,与用户点击浏览器的Back和Forward按钮的作用相同。
● go() :使用一个整型参数,在历史列表中向前(正参数)或向后(负参数)跳过多少页。
7.6 窗口、屏幕和浏览器信息
●获得窗口的大小/屏幕和浏览器信息的相关代码如下所示:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
8
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
9
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
10
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
11
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
12
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
13
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
14
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
15
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
16
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
17
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
18
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
19
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
20
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
注:以上属性,对于在Window IE6中并没有定义,Windows定义的相关属性在后面注释中已经写出来了。
7.7 Screen对象
Screen提供了有关用户显示器的大小和可用颜色数量的信息。有以下属性:
width/height : 以像素为单位的显示器大小。
availWidth/availHeight: 实际可用的显示大小。
availLeft/availTop : 屏幕上第一个可用位置的坐标(不适合IE)
7.8 Navigator对象
Navigateor对象提供了Web浏览器的总体信息。经常通过它用来区分在哪个浏览器中运行。
● 它有以下五个属性:
appName : Web浏览器的简单名称
appVersion : Web浏览器的版本号
userAgent : 浏览器在它的USER-AGENT HTTP头部中发送的字符串。
appCodeName : 浏览器的代码名
platform : 运行浏览器的平台
→以下代码在一个对话框中显示了Navigator对象的每个属性:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
alert(browser);
→以下代码用来确定浏览器和厂商版本:
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
7.9 打开窗口和关闭窗口
● 打开窗口
使用window.open方法可以打开一个新的浏览器窗口。大多数Web浏览器配备了某种弹出窗口阻止系统。
★ 一般的,只有当作为用户点击按钮或链接的响应的时候,调用open()方法才会成功。★
windows.open调用需要四个参数。返回值是代表新打开窗口的window对象。
参数1:新窗口中显示的文档URL ,如果参数为null或空字符串,新打开的窗口为空
参数2:新窗口的名字,可以作为<a>标记或<form>标记的taget属性的值。
参数3:特性列表,声明窗口大小及GUI装饰。如果省略,将使用默认大小,及具有一套标准的GUI特性。
参数4:只在参数2命名的是一个已经存在的窗口时才有用,它是一个布尔值,表示参数1的URL是应该替换掉窗口浏览历史的当前项(true),还是在窗口浏览历史中创建一个新的项(false),后者是默认设置。
打开窗口举例:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
● 关闭窗口
方法close将关闭一个窗口。如果已经创建了一个Window对象w,可以使用以下代码关闭:
w.close();
运行在被打开窗口中的JS代码可以使用以下代码关闭(关闭自身窗口)
window.close();
7.10 键盘焦点和可见性
方法focus()和blur()提供了对窗口的高级控制。focus()会请求系统将键盘焦点赋于窗口,调用blur会放弃键盘焦点。
在使用window.open()方法打开新窗口时,浏览器会自动在顶部创建窗口。但是如果它第二个参数指定的窗口名已经存在,open()方法不会自动使那个窗口可见,因此,调用open()后调用focus()很常用。
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
7.11 状态栏
可以设置window.status属性来设置状态栏的显示。但是,现有的浏览器关闭了状态栏的status属性功能。
也可以使用window.defaultstatus属性,当浏览器没有任何其它东西(例如超链接URL)来显示的时候,会指定状态栏显示的文本。