BOM（浏览器模型）

一、简介

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

• 浏览器对象模型
• 把【浏览器】当成一个【对象】来看待
• BOM 的顶级对象是window
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性比较差

二、window对象

2.1、窗口关系与框架

top对象：始终指向最高层的框架，即浏览器窗口，使用它可以确保在一个框架中正确地访问另一个框架。
parent对象：始终指向当前框架的直接上层框架，在某些情况下，parent 有可能等于 top；但在没有框架的情况下，parent 一定等于top（此时它们都等于 window）。
self对象：始终指向自身框架。

2.2、窗口的位置

screenLeft 和screenTop 属性：用于表示窗口相对于屏幕左侧和顶部的位置。
moveTo() 和 moveBy() ：移动窗口

window.moveTo(0,0); // 把窗口移动到左上角
window.moveBy(0, 100); // 把窗口向下移动 100 像素
window.moveTo(200, 300); // 把窗口移动到坐标位置(200, 300)
window.moveBy(-50, 0); // 把窗口向左移动 50 像素

2.3、窗口的大小

• 视口的大小

1. document.body.clientWidth或者document.body.clientHeight
2. document.documentElement.clientWidth或者document.documentElement.clientHeight

• 窗口本身尺寸
  outerWidth 和 outerHeight
• 页面视图区大小（减去边框）
  innerWidth 和 innerHeight
  返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）页面视口的宽度和高度
• 窗口位置移动
  resizeTo() 和 resizeBy()

2.4、打开新窗口open

语法：window.open(URL,name,features);
作用：导航到指定 URL，也可用于打开新浏览器窗口
该方法接收4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口是否替代当前加载页面的布尔值

URL：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name ：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记< a>和 < form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

features ：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在<窗口特征>这个表格中，我们对该字符串的格式进行了详细的说明。

常用features：

1. height、width 窗口文档显示区的高度、宽度。以像素计;
2. left、top 窗口的x坐标、y坐标。以像素计;
3. toolbar=yes | no 是否显示浏览器的工具栏。黙认是yes;
4. scrollbars=yes | no 是否显示滚动条。黙认是yes;
5. location=yes | no 是否显示地址地段。黙认是yes;
6. status=yes | no 是否添加状态栏。黙认是yes;
7. menubar=yes | no 是否显示菜单栏。黙认是yes;
8. resizable=yes | no 窗口是否可调节尺寸。黙认是yes;
9. titlebar=yes | no 是否显示标题栏。黙认是yes;
10. fullscreen=yes | no 是否使用全屏模式显示浏览器。黙认是no;

// 打开一个可缩放的新窗口,大小为400像素×400像素,位于离屏幕左边及顶边各10像素的位置
// 可以获得这个窗口对象的引用
let wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
// 关闭窗口
wroxWin.close();

2.5、间歇与超时调用

JavaScript 在浏览器中是单线程执行的。
超时调用：setTimeout()
该函数返回一个 ID，用于表示超时任务

// 设置超时任务
let timeoutId = setTimeout(() => alert("Hello world!"), 1000);
// 取消超时任务
clearTimeout(timeoutId);

间歇调用：setInterval() ，不常用，因为后一个间歇调用可能会在前一个间歇调用结束之前启动
该方法也会返回一个循环定时 ID
例子：

let num = 0, intervalId = null;
let max = 10;
let incrementNumber = function() {
    num++;
    // 如果达到最大值，则取消所有未执行的任务
    if (num == max) {
        clearInterval(intervalId);
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber, 500);

setTimeout版本，使用 setTimeout不一定要记录超时 ID

let num = 0;
let max = 10;
let incrementNumber = function() {
    num++;
    // 如果还没有达到最大值，再设置一个超时任务
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

2.6、对话框

alert() ：警告框。只有一个“OK”按钮
confirm() ：确认框。有两个按钮：“Cancel”和“OK”，单击"OK"返回true，点击"Cancel"返回false
prompt()：提示框。提示用户输入消息。单击了“OK”按钮，prompt() 会返回文本框中的值。如果单击了 Cancel 按钮，或者对话框被关闭，prompt() 会返回null。

三、location对象

3.1、属性

location.href ：获取或者设置 整个URL
location.host ：返回主机域名
location.port ：返回端口号 如果未写返回空字符串
location.pathname ：返回路径
location.search ：返回参数
location.hash ：返回片段 #后面内容 常见于链接 锚点

3.2、刷新页面

location.assign()：href一样，可以跳转页面（也称为重定向页面）
location.replace()：当前页面，因为不记录历史，所以不能后退页面
<folocation.reload()：重新加载页面，相当于刷新按钮或者f5；如果参数为true强制刷新 ctrl+f5

四、navigator对象

客户端标识浏览器的标准。
只要浏览器启用 JavaScript， navigator 对象就一定存在。但是与其他 BOM 对象一样，每个浏览器都支持自己的属性。
navigator 对象的属性通常用于确定浏览器的类型。
下面列几个常用的：
navigator.appName：浏览器全名
navigator.appVersion：浏览器版本
navigator.vendor： 返回浏览器的厂商名称
window.navigator.plugins：浏览器插件数组，数组中的插件可通过name属性查看插件名称

五、screen对象

展示浏览器窗口外面的客户端显示器的信息，比如像素宽度(window.screen.width)和像素高度(window.screen.height)，这些信息一般用于站点分析。
属性：
height : 返回屏幕总高度，单位像素
width : 返回屏幕总宽度，单位像素
availHeight : 返回屏幕的总高度(不包括任务栏)，单位像素
availWidth : 返回屏幕的宽度(不包括任务栏)，单位像素
colorDepth : 用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth : 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持此属性）

六、history对象

该对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。每个 window 都有自己的 history 对象。
history.go()：在用户历史记录中任意跳转。
传整数表示前进，传负数表示后退。
例如：
后退一页：history.go(-1)；前进一页：history.go(1)；前进两页history.go(2)。
在旧版本的一些浏览器中， go() 方法的参数也可以是一个字符串，这种情况下浏览器会导航到历
史中包含该字符串的第一个位置，可能前进也可能后退。
history.back()：后退一页
history.forward()：前进一页
history.length：历史记录的数量，包括所有前进和后退的记录