前端架构师之09_JavaScript_BOM
1 什么是 BOM 对象
BOM：Brower Object Model，指的是浏览器对象模型。
BOM 用来操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。
浏览器对象：浏览器提供的一系列内置对象的统称。
BOM 浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。
window 对象是 BOM 的顶层（核心）对象。其他的对象都是以属性的方式添加到 window 对象下，也可称为 window 的子对象。
- document（文档对象）：
- history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。
- location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。
- navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。
- screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。
BOM 没有一个明确的规范，所以浏览器提供商会按照各自的想法随意去扩展 BOM。而各浏览器间共有的对象就成为了事实上的标准。不过在利用 BOM 实现具体功能时要根据实际的开发情况考虑浏览器之间的兼容问题，否则会出现不可预料的情况。
2 window 对象
2.1 全局作用域
window 对象是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。
定义在全局作用域中的变量、函数以及 JavaScript 中的内置函数都可以被 window 对象调用。
var area = 'Beijing';
function getArea(){
return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(area));
- 定义在全局作用域中的 getArea() 函数，函数体内的 this 关键字指向 window 对象。
- 对于 window对象的属性和方法在调用时可以省略 window，直接访问其属性和方法即可。
在 JavaScript 中直接使用一个未声明的变量会报语法错误，但是使用“window.变量名”的方式则不会报错，而是获得一个 undefined 结果。
除此之外，delete 关键字仅能删除 window 对象自身的属性，对于定义在全局作用域下的变量不起作用。
2.2 弹出对话框和窗口
window 对象中除了前面提过的 alert() 和 prompt() 方法外，还提供了很多弹出对话框和窗口的方法，以及相关的操作属性。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | closed | 返回一个布尔值，该值声明了窗口是否已经关闭 |
| 属性 | name | 设置或返回存放窗口名称的一个字符串 |
| 属性 | opener | 返回对创建该窗口的window对象的引用 |
| 属性 | parent | 返回当前窗口的父窗口 |
| 属性 | self | 对当前窗口的引用，等价于window属性 |
| 属性 | top | 返回最顶层的父窗口 |
| 方法 | alert() | 显示带有一段消息和一个确认按钮的警告框 |
| 方法 | confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| 方法 | prompt() | 显示可提示用户输入的对话框 |
| 方法 | open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| 方法 | close() | 关闭浏览器窗口 |
| 方法 | focus() | 把键盘焦点给予一个窗口 |
| 方法 | print() | 打印当前窗口的内容 |
| 方法 | scrollBy() | 按照指定的像素值来滚动内容 |
| 方法 | scrollTo() | 把内容滚动到指定的坐标 |
所有的属性和方法在常见的浏览器（如IE、Chrome等）中全部支持。
prompt() 方法
作用：用于生成用户输入的对话框。
第1个参数：用于设置用户输入的提示信息。
第2个参数：用于设置输入框中的默认信息。
prompt('请输入测试的选项');
prompt('请输入测试的选项', '用户名和密码');
confirm() 方法
作用：弹出一个确认对话框，该对话框中包含提示消息以及确认和取消按钮。
参数：用于设置确认的提示信息。
返回值：点击“确定”按钮，返回true。点击“取消”按钮，返回false。
confirm('确定要删除吗？')
open() 方法
作用：用于打开一个新的浏览器窗口，或查找一个已命名的窗口。
语法：open(URL, name, specs, replace)。
- 第1个参数：打开指定页面的URL地址，若没有指定，则打开一个新的空白窗口。
- 第2个参数：指定target属性或窗口的名称
- 第3个参数：用于设置浏览器窗口的特征（如大小、位置、滚动条等），多个特征之间使用逗号分隔。
- 第4个参数：设置为true，表示替换浏览历史中的当前条目，设置false（默认值），表示在浏览历史中创建新的条目。
| name可选值 | 含义 |
|---|---|
_blank |
URL加载到一个新的窗口，也是默认值 |
_parent |
URL加载到父框架 |
_self |
URL替换当前页面 |
_top |
URL替换任何可加载的框架集 |
| name | 窗口名称 |
| specs可选参数 | 值 | 说明 |
|---|---|---|
| height | Number | 窗口的高度，最小值为100 |
| left | Number | 该窗口的左侧位置 |
| location | yes|no|1|0 | 是否显示地址字段，默认值是yes |
| menubar | yes|no|1|0 | 是否显示菜单栏，默认值是yes |
| resizable | yes|no|1|0 | 是否可调整窗口大小，默认值是yes |
| scrollbars | yes|no|1|0 | 是否显示滚动条，默认值是yes |
| status | yes|no|1|0 | 是否要添加一个状态栏，默认值是yes |
| titlebar | yes|no|1|0 | 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框，默认值是yes |
| toolbar | yes|no|1|0 | 是否显示浏览器工具栏，默认值是yes |
| width | Number | 窗口的宽度，最小值为100 |
与 open() 方法功能相反的是 close() 方法，用于关闭浏览器窗口，调用该方法的对象就是需要关闭的窗口对象。
2.3 窗口位置和大小
BOM 中用来获取或更改 window 窗口位置，窗口高度与宽度，文档区域高度与宽度的相关属性和方法有很多。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | screenLeft | 返回相对于屏幕窗口的x坐标（Firefox不支持） |
| 属性 | screenTop | 返回相对于屏幕窗口的y坐标（Firefox不支持） |
| 属性 | screenX | 返回相对于屏幕窗口的x坐标（IE8不支持） |
| 属性 | screenY | 返回相对于屏幕窗口的y坐标（IE8不支持） |
| 属性 | innerHeight | 返回窗口的文档显示区的高度（IE8不支持） |
| 属性 | innerWidth | 返回窗口的文档显示区的宽度（IE8不支持） |
| 属性 | outerHeight | 返回窗口的外部高度，包含工具条与滚动条（IE8不支持） |
| 属性 | outerWidth | 返回窗口的外部宽度，包含工具条与滚动条（IE8不支持） |
| 方法 | moveBy() | 将窗口移动到相对的位置 |
| 方法 | moveTo() | 将窗口移动到指定的位置 |
| 方法 | resizeBy() | 将窗口大小调整到相对的宽度和高度 |
| 方法 | resizeTo() | 将窗口大小调整到指定的宽度和高度 |
目前只有 window.open() 方法打开的的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。
2.4 框架操作
window 对象提供的 frames 属性可通过集合的方式，获取 HTML 页面中所有的框架，length 属性就可以获取当前窗口中 frames 的数量。
<body>
<iframe name="frame01">iframe>
<iframe name="frame02">iframe>
<iframe name="frame03">iframe>
body>
<script>
// 获取窗口对应给定对象的内容
// 方式1：
window.frames['frame01'].document.write('frame01 text.');
// 方式2：
window.frames.frame02.document.write('frame02 text.');
// 方式3：
window.frames[2].document.write('frame03 text.');
script>
除此之外，还可以利用 parent 获取当前 window 对象所在的父窗口。
window.parent; // 如果在框架中，获取父级窗口，否则返回自身引用
window.parent.frames; // 获取同级别的框架
2.5 定时器
JavaScript 中可通过 window 对象提供的方法实现在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。
| 方法 | 说明 |
|---|---|
| setTimeout() | 在指定的毫秒数后调用函数或执行一段代码 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或执行一段代码 |
| clearTimeout() | 取消由setTimeout()方法设置的定时器 |
| clearInterval() | 取消由setInterval()设置的定时器 |
setTimeout() 和 setInterval() 方法区别：
- 相同点：都可以在一个固定时间段内执行 JavaScript 程序代码。
- 不同点：setTimeout() 只执行一次代码，setInterval() 会在指定的时间后，自动重复执行代码。
// 只执行一次代码
setTimeout(echoStr, 3000);
function echoStr() {
console.log('JavaScript');
}
// 重复执行代码
setInterval(echoStr, 3000);
function echoStr() {
console.log('JavaScript');
}
- setTimeout() 方法在执行一次后即停止了操作；setInterval() 方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。
- 若要在定时器启动后，取消该操作，可以将 setTimeout() 的返回值（定时器ID）传递给 clearTimeout() 方法；或将 setInterval() 的返回值传递给 clearInterval() 方法。
2.6 练习作业
- 限时秒杀
- 指定限时秒杀的结束时间，及其对应的毫秒数。
- 获取当前时间的毫秒数。
- 计算当前与秒杀结束的时间差，大于0，计算剩余的天时分秒；否则结束秒杀。
- 利用定时器完成秒杀的倒计时功能。
- 利用两位数字显示秒杀的时间。
3 location 对象
3.1 更改 URL
URL：Uniform Resource Locator，统一资源定位符。
在 Internet 上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。
// http://www.example.com:80/web/index.html?a=3&b=4#res
// http 传输数据所使用的协议
// www.example.com 服务器主机名
// 80 端口号
// /web/index.html 要请求的资源
// a=3&b=4 用户传递的参数
// #res 页面内部的锚点
// 由于80是Web服务器的默认端口号，因此可以省略URL中的“:80”
// 即：http://www.example.com/web/index.html?a=3&b=4#res
location 对象提供的用于改变 URL 地址的方法，所有主流的浏览器都支持。
| 名称 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
reload() 方法的唯一参数，是一个布尔类型值，将其设置为 true 时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。
3.2 获取 URL 参数
Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。
- 用户访问该URL地址。
- 获取带有?的请求参数。
获取URL的指定部分：location.属性名。
设置URL的指定部分：location.属性名 = 值。
| 属性 | 说明 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回URL的路径名 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
3.3 练习作业
- 定时跳转
- 编写定时跳转的HTML页面。
- 获取指定的秒数，并减1写入页面。
- 当秒数大于0时，利用 setTimeout() 循环倒计时。
- 当秒数小于等于0时，利用 location.href 跳转到指定的URL地址中。
4 history 对象
4.1 历史记录跳转
history对象可对用户在浏览器中访问过的URL历史记录进行操作。
出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | length | 返回历史列表中的网址数 |
| 方法 | back() | 加载history列表中的前一个URL |
| 方法 | forward() | 加载history列表中的下一个URL |
| 方法 | go() | 加载history列表中的某个具体页面 |
- go()方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。
- 当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。
4.2 无刷新更改 URL 地址
HTML5为history对象引入了history.pushState()和history.replaceState()方法，用来在浏览历史中添加和修改记录，实现无刷新更改URL地址。
pushState(state, title, [url]) // 添加历史记录
replaceState(state, title, [url]) // 修改历史记录
- 参数state：表示一个与指定网址相关的状态对象，此处可以填null或空字符串。
- 参数title：表示新页面的标题，可以填null或空字符串。
- 参数url：表示新的网址，并且必须与当前页面处在同一个域中。
history.pushState(null, null, "?a=check");
history.pushState(null, null, "?a=login");
history.replaceState(null, null, "?p=1");
- pushState()方法会改变浏览器的历史列表中记录的数量。
- replaceState()方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace()方法的功能类似。
5 navigator 对象
navigator对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下。
| 分类 | 名称 | 说明 |
|---|---|---|
| 属性 | appCodeName | 返回浏览器的内部名称 |
| 属性 | appName | 返回浏览器的名称 |
| 属性 | appVersion | 返回浏览器的平台和版本信息 |
| 属性 | cookieEnabled | 返回指明浏览器中是否启用cookie的布尔值 |
| 属性 | platform | 返回运行浏览器的操作系统平台 |
| 属性 | userAgent | 返回由客户端发送服务器的User-Agent头部的值 |
| 方法 | javaEnabled() | 指定是否在浏览器中启用Java |
6 screen 对象
screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。
| 名称 | 说明 |
|---|---|
| height | 返回整个屏幕的高 |
| width | 返回整个屏幕的宽 |
| availHeight | 返回浏览器窗口在屏幕上可占用的垂直空间 |
| availWidth | 返回浏览器窗口在屏幕上可占用的水平空间 |
| colorDepth | 返回屏幕的颜色深度 |
| pixelDepth | 返回屏幕的位深度/色彩深度 |
7 练习作业
- 红绿灯倒计时
- 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
- 亮灯时长需根据路口的实际情况等因素来考虑设置，如红灯亮设置为30秒，绿灯亮设置为35秒，黄灯亮设置为5秒。
- 编写HTML，设置红黄绿灯及倒计时的显示页面。
- 创建红、黄、绿灯对象lamp，保存相关的数据。
- 创建倒计时的元素对象count，实现倒计时的时间设置。
- 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
- 利用setInterval()函数完成信号灯倒计时的动态改变效果。
水平空间 |
| colorDepth | 返回屏幕的颜色深度 |
| pixelDepth | 返回屏幕的位深度/色彩深度 |
7 练习作业
- 红绿灯倒计时
- 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
- 亮灯时长需根据路口的实际情况等因素来考虑设置，如红灯亮设置为30秒，绿灯亮设置为35秒，黄灯亮设置为5秒。
- 编写HTML，设置红黄绿灯及倒计时的显示页面。
- 创建红、黄、绿灯对象lamp，保存相关的数据。
- 创建倒计时的元素对象count，实现倒计时的时间设置。
- 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
- 利用setInterval()函数完成信号灯倒计时的动态改变效果。