BOM与Window对象详解-优快云博客

BOM

1 BOM的概念

BOM 是Browser Object Model（浏览器对象模型）的缩写，提供与浏览器窗口进行交互的对象。JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C,而BOM缺乏标准。这也是各种浏览器不兼容的根源所在。

2 window对象

window对象是BOM的核心,是最顶层的对象，所有对象都是通过它延伸出来的。

2.1全局作用域

1.定义在全局环境下的变量都会成为window对象的属性;

2.把变量定义在函数体里，可以有效减少全局环境下的变量冲突，避免污染全局环境;

3.通过var在全局作用域下声明的变量用delete无法删除;

例如：

var obj = {name:'xxx'};

//删除对象的属性用delete：

delete obj.name;

4.在函数内部不用var声明的变量会成为全局变量，即window对象的属性；

5.window对象可以在代码中省略，如window.alert()可以写成alert();。

2.2 window对象下的属性

2.2.1常用属性

2.2.1.1浏览器窗口尺寸

1.innerWidth/innerHeight, //表示浏览器窗口”可视区域”尺寸；
2.outerWidth/outerHeight //表示整个浏览器窗口的尺寸。

2.2.1.2滚动相关

1.scrollX/scrollY //获取浏览器窗口滚动条滚动过的距离；

2.scrollTo(x,y) //设置浏览器滚动距离；

3.scrollBy(xnum,ynum) //设置基于当前位置滚动的距离，可以为负数。

2.2.1.3 JS中如何获取HTML中元素的width,height

offsetWidth:元素边框内的宽；

offsetHeight:元素边框内的高。

2.2.2常用方法（了解）

1.alert(msg)//弹出对话框。

2.confirm(msg)//弹出警告框，返回布尔值。

3.prompt(msg,default)//弹出输入框，返回消息或null。

以上三个方法都会暂停代码的执行。

4.open(url,name,[options]) : 打开一个新窗口并返回新 window 对象：

name:不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载；

options为字符串：'width=400,height=400,top=200,left=200'；

opener父窗口对象，通过open方法打开的窗口才有opener对象。

5.close(): 关闭窗口。

6.print(): 调出打印对话框。

2.2.3属性对象

2.2.3.1 document(核心)

文档对象，让我们可以在js脚本中直接访问页面元素(DOM)，在DOM章节详细讲解。

2.2.3.2 history(重要)

历史对象,包含窗口的浏览历史，可以实现后退。

1.属性：

length 返回浏览器历史列表中的 URL数量。

2.方法：

back() 加载 history列表中的前一个 URL。

forward() 加载 history列表中的下一个 URL。

go() 加载 history列表中的某个具体页面，支持负数:

history.go(2);//向前两个页面；

history.go(-2);//后退两个页面。

2.2.3.3location(重要)

location是BOM最有用的对象之一，保存着当前窗口中加载文档的相关信息，还提供一些导航功能，它是个很特别的对象，既是window的属性，也是document的属性。

1.属性：

hash 设置或返回从井号 (#)开始的 URL（锚）==>哈希值。

href 设置或返回完整的 URL。

search 设置或返回从问号 (?)开始的 URL（查询部分）。

encodeURI();//转码

decodeURI();//解码

PS：修改以上属性(hash除外)都会刷新当前页面，并生成历史纪录。

2.方法：

reload() 重新加载当前文档，带参数true表示不使用缓存刷新页面。

2.2.3.4 navigator（了解）

导航对象, 包含所有有关访问者浏览器的信息，通常用于检测浏览器类型。

1.appName 浏览器名称；

2.appVersion 浏览器版本；

3.platform 操作系统；

4.userAgent 用户代理信息，通过该属性可以获取浏览器及操作系统信息；

5.geolocation 获取地理位置信息。

2.3 window对象常用事件

2.3.1 window.onload

页面资源全部加载完成后触发这个事件。其中常用到 window.onload = function(){}，主要有两个优点：

1.把变量定义在函数内，可以有效减少全局环境下的变量冲突，避免污染全局环境；

2.window.onload延迟JS代码执行，可以将JS代码写在head里。

2.3.2 window.onscroll

滚动窗口滚动条时触发。

2.3.3 window.onresize

窗口大小改变时触发。

2.3.4 window.onbeforeunload

在页面关闭时触发这个事件。