基本的BOM体系结构图
window子对象
- document 对象
- frames 对象
- history 对象
- location 对象
- navigator 对象
- screen 对象
window对象关系属性
- parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
- self :指向当前的window对象,与window同意。 (window对象)
- top :如果当前窗口为frame,指向包含该frame的top-level的window对象
- window :指向当前的window对象,与self同意。
- opener :当窗口是用javascript打开时,指向打开它的那人窗口(开启者)
window对象定位属性
- IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性。
- Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。
window对象的方法
-
窗体控制
- moveBy(x,y)——从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
- moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域
- resizeBy(w,h)——相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
- resizeTo(w,h)——把窗体宽度调整为w个像素,高度调整为h个像素
-
窗体滚动轴控制
- scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
- scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
-
窗体焦点控制
- focus()—— 使窗体或控件获取焦点
- blur()——与focus函数相反,使窗体或控件失去焦点
-
新建窗体
- open()——打开(弹出)一个新的窗体
- close()——关闭窗体
- opener属性——新建窗体中对父窗体的引用,中文"开启者"的意思
window.open方法语法
window.open(url, name, features, replace);
open方法参数说明
- url -- 要载入窗体的URL
- name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
- features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔
- replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定
open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口
参数名称 | 类型 | 说明 |
---|---|---|
height | Number | 设置窗体的高度,不能小于100 |
left | Number | 说明创建窗体的左坐标,不能为负值 |
location | Boolean | 窗体是否显示地址栏,默认值为no |
resizable | Boolean | 窗体是否允许通过拖动边线调整大小,默认值为no |
scrollbars | Boolean | 窗体中内部超出窗口可视范围时是否允许拖动,默认值为no |
toolbar | Boolean | 窗体是否显示工具栏,默认值为no |
top | Number | 说明创建窗体的上坐标,不能为负值 |
status | Boolean | 窗体是否显示状态栏,默认值为no |
width | Number | 创建窗体的宽度,不能小于100 |
特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格
open方法返回值为一个新窗体的window对象的引用
-
对话框
- alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)
- confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按钮与“取消”按钮)
- prompt(str,defaultValue)——弹出消息对话框(对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框),由于各个浏览器实现的不同,若没有第二个参数(文本框中的默认值)时也最好提供一个空字符串
-
状态栏
- window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时),浏览器底部的区域称为状态栏,用于向用户显示信息
- window.status 属性——临时改变浏览器状态栏的显示
-
时间等待与间隔函数
- setTimeout()—— 暂停指定的毫秒数后执行指定的代码
- clearTimeout()——取消指定的setTimeout函数将要执行的代码
- setInterval()——间隔指定的毫秒数不停地执行指定的代码
- clearInterval()——取消指定的setInterval函数将要执行的代码
setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID
var tid = setTimeout("alert('1')",1000); alert(tid); clearTimeout(tid);
History对象,在浏览器历史记录中导航
History 对象的属性:length 返回浏览器历史列表中的 URL 数量
History 对象的方法
- back() 加载 history 列表中的前一个 URL
- forward() 加载 history 列表中的下一个 URL
- go(num) 加载 history 列表中的某个具体页面
Location 对象
Location 对象的属性
- hash 设置或返回从井号 (#) 开始的 URL(锚)
- host 设置或返回主机名和当前 URL 的端口号
- hostname 设置或返回当前 URL 的主机名
- href 设置或返回完整的 URL
- pathname 设置或返回当前 URL 的路径部分
- port 设置或返回当前 URL 的端口号
- protocol 设置或返回当前 URL 的协议
- search 设置或返回从问号 (?) 开始的 URL(查询部分)
Location 对象的方法
- assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
- reload() 重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
- replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。
Navigator对象
Navigator 对象的属性
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
- browserLanguage 返回当前浏览器的语言
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
- cpuClass 返回浏览器系统的 CPU 等级
- onLine 返回指明系统是否处于脱机模式的布尔值
- platform 返回运行浏览器的操作系统平台
- systemLanguage 返回 OS 使用的默认语言
- userAgent 返回由客户机发送服务器的 user-agent 头部的值
- userLanguage 返回 OS 的自然语言设置