window对象
![]()
window对象处于对象链的顶端,因为它是Web浏览器中查看所有内容的主要容器. 只要打开浏览器,即使窗口没有加载文档,window对象也在内存的当前模型中定义好了
除了文档所在的窗口内容外,窗口的影响范围还包括窗口的尺寸和包围内容区域的所有”元素”.滚动条,工具栏和菜单栏所在的区域叫做窗口的窗框.不是每个浏览器都可以完全控制浏览器主窗口的窗框,但可以便捷地创建其他窗口,随意地设置其大小,指定要显示的窗框元素.
每个框架都可以看做一个window对象,因为每个框架都可以存放不同的文档.脚本在其中一个文档上运行时,它把拥有这个文档的框架作为对象层次结构图中的window对象.
访问窗口的属性和方法
window.propertyName
window.methodName([Parameters])
1
| 在脚本引用指向包含文档的窗口时,window对象有一个同义词self,以上的引用也等价于:
|
self.propertyName
self.methodName([Parameters])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
### 创建窗口
- 脚本并不创建主浏览器窗口,用户在创建主窗口的时候需要启动浏览器.但是在主窗口打开后,脚本就可以生成大量子窗口.
- 生成新窗口的方法是:`window.open()`.这个方法最多包含三个参数,来定义窗口属性.
- 例子:`var subWindow = window.open("define.html","def","height=200,width=300");`
这个语句将新建的窗口赋值给了变量subWindow.(**这个语句打开了一个具有指定大小的新窗口,这个窗口包含的html文档为define.html,并且与当前页面处于同一个服务器目录下**)
- 如果要关闭此子窗口,则调用`subWindow.close()`即可.而调用`window.close()/self.close()或者close()`就会关闭主窗口.
### window对象的属性和方法
#### window.alert()方法
- 可以直接使用`alert()`来调用这个方法(省略前面的window).这个window方法会生产一个对话框,显示作为参数传送的文本.OK按钮允许用户关闭这个对话框.
#### window.confirm()方法
- 这个方法也是弹出一个对话框,但是有两个按钮(大多数平台上为Ok和Cancel),称为确认对话框.**更重要的是,这个方法有返回值:单击OK返回值为true,单击Cancel返回值为false**. 可以将这个方法的计算值作为if或if..else结构中的条件语句.
- 例子:
|
if (confirm(“Are you sure to start over?”)){
location.href = “index.html”;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#### window.prompt()方法
- window对象的最后一种对话框是提示对话框,它显示了预置的信息,并提供一个文本域供用户输入响应.这个对话框有两个按钮:OK和Cancel.
- window.prompt()方法有两个参数,第一个参数是呈现给用户的提示信息;第二个参数是一个字符串,它在文本域中显示为默认的答案.如果不希望显示默认答案就传入一个空字符串(空双引号).
- 用户单击按钮时,这个方法就会返回一个值.不管用户在文本域中输入什么,单击Cancel按钮都会返回null值,单击OK则返回输入的字符串值.这个信息也可以用在判断中,`null值等同于false,空字符串也看做false`.
#### load事件
- window对象会响应几个系统和用户事件,最常见的是页面加载完毕时触发的事件.**这个事件等待图像, Java applet和插件程序的数据文件完全下载到浏览器中**.使用load事件调用函数的优点在于,它确保所有document对象都存在于浏览器的DOM中.
- 可以通过如下方式调用onload方法:
|
window.addEventListener(‘load’, functionName, false);
window.attachEvent(‘onload’, functionName);
//其中functionName是页面下载完成后要运行的函数的名称.可以多次调用addEventListener和attachEvent,把多个函数添加到页面加载完毕要执行的列表中.
window[‘onload’] = functionName;
window.onload = functionName;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| 但是这种用法表示,页面加载完毕后,只执行一个函数,并替代已赋予window对象的其他事件处理程序.
## location对象
---
- 这个对象表示载入窗口的URL.它和document对象不同:文档是页面的内容,而位置是页面的URL.
- 脚本大多数只使用该对象的一个属性:`href`,它定义了完整的URL.
- 如果要加载的页面在另一个窗口或框架中,就必须在语句中包含窗口的引用.例如:用脚本打开一个新窗口,并将它的引用赋值给变量newWindow,将页面载入子窗口,如下:
`newWindow.loaction.href = "http://www.example.com"`
## navigator对象
---
- navigator.userAgent属性返回一个包含浏览器和操作系统的诸多细节的字符串.
## document对象
---
### document.getElementById()方法
- 此方法的唯一参数是带引号的字符串,该字符串包含要引用的元素的ID.
- 例子:`var oneTable = document.getElementById('salesResults');`.在赋值语句后,变量就表示对象,可用于获取和设置该对象的属性,或者调用此类对象的方法.
### document.getElementByTagName()方法
- 可以使用getElementByTagName()方法方便地收集一组共享同一个标记名称的页面元素.例如,要获得页面上所有的图像:`var aImages = document.getElementByTagName('img');`
- 然后可以通过数组的方法来获取数组的长度:`aImages.length`,然后每个对象就可以使用数组的偏移量来访问.
### document.forms[]属性
- 比较下面两个表达式:
|
var aForms = document.forms;
var aForms = document.getElementByTagName(‘form’);
1
2
3
4
5
| **一个重要的区别是,document.forms集合允许按名称直接引用某个表单,而不仅仅是按照数组的偏移量来访问.**
- 因为有些时候按照下标号引用表单未必可行.动态网页可能根据上下文包含数量可变的表单,所以表单在页面上的位置可能随上下文而变化.
- 支持脚本编程的浏览器允许通过表单名或ID(即分配给`<form>标记的name或者id属性`)更直接地引用表单:
|
document.getElementById("entry")
document.searchForm.entry
document.searchForm.elements[0]qitak
document.forms["searchForm"].elements["entry"]
document.forms["searchForm"].entry
```
