HTML BOM

HTML BOM

BOM让JavaScript能够和浏览器“对话”。

1. 什么是BOM
   BOM，Browser Object Model，即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

不同于DOM的标准化组织是W3C，JavaScript的语法标准化组织是ECMA，BOM没有官方标准，它最初是Netscape浏览器标准的一部分，也就是说，对于现代浏览器，每个浏览器都有自己的BOM实现方法，所以直接使用BOM会有兼容性问题。

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.

By w3cschool

但是为了利用JavaScript完成交互，现代浏览器几乎都实现了相同的方法和属性，这些方法和属性被称作BOM的方法和属性。

2. BOM包含哪些内容
   BOM有一个核心对象window，window对象包含了6大核心模块，分别是：

document对象，即文档对象

frames，即HTML自框架

history，即页面的历史记录

location，即当前页面的地址

navigator，包含浏览器相关信息

screen，用户显示屏幕相关属性

3.1 window对象
BOM的核心对象就是window，window对象也是BOM的顶级对象，所有浏览器都支持window对象，它代表的是浏览器的窗口。

JavaScript的所有全局对象、全局方法和全局变量全都自动被归为window对象的方法和属性，在调用这些方法和属性的时候可以省略window。DOM也是window对象的属性。

window.document.getElementById(“header”);
//等同于
document.getElementById(“header”);
window对象的size
window对象有两个用来定义浏览器窗口大小的属性（两个属性均返回以px像素为单位的数值）：

window.innerHeight

它返回浏览器窗口的高度

window.innerWidth

返回浏览器窗口的宽度

注意：

浏览器窗口的视窗不包括工具栏和滚动条。

也就是说，全屏状态下，不同的浏览器因为布局不一样，也会返回不同的innerHeight和innerWidth

我们随便用一个页面来测试一下，在页面添加如下内容：

用chrome全屏打开：

image
用safari全屏打开：

image
高度上的区别是因为我的chrome中添加了书签栏，但是Safari没有，而且两个浏览器本身窗口的设计就有区别；宽度上的区别是因为我随手拉开控制台的宽度不一样，视窗大小是不包含控制台的宽度的。

对于IE 5-8，innerWidth和innerHeight并不兼容，需要使用：

document.documentElement.clientHeight / document.documentElement.clientWidth
或者

document.body.clientHeight / document.body.clientWidth
比较全面的写法是：

let w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

let h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window的方法
window.open(url, target, specs, replace)
打开一个新的窗口。四个参数(均为可选）分别是:

url 要打开窗口的路径

target 打开方法

_blank 在新窗口打开，默认设置为_blank

_self 在原窗口打开，替代原窗口

_parent 在父框架中打开

name 指定在某个窗口打开

specs 规定新窗口的样式（用逗号连接，不用空格）

width=pixels

height=pixels

replace 是否在history列表中替代当前页面

click to open

image
window.open(“https://www.w3schools.com”, “_blank”, “toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400”);
image
window.close()
关闭当前窗口

window.moveTo()
移动窗口到特定位置

window.resizeTo()
修改窗口大小

3.2 document对象
渲染引擎在解析HTML对象时，会生成一个document对象，即文档对象，它是HTML文档的根节点。每一个元素都会生成对应的DOM对象，由于元素之间有层级关系，整个HTML代码解析结束后，会生成一个由不同节点组成的树形结构，成为DOM树。document用于描述DOM树的状态和属性，并提供了很多操作DOM的API。

3.3 frames
frame指HTML子框架，即在浏览器里嵌入另一个窗口。父框架和子框架拥有独立的作用域和上下文。

window.frames返回的是一个类数组的对象，对象的内容是当前页面中的元素。这些元素可以通过索引号来获得。

window.frames[0].location = “https://www.baidu.com”;
frames.length; //子框架的个数

元素也是frames的一种，是一种只读元素，但是它无法在HTML5中使用。

3.4 history
window.history对象包含浏览器的历史记录，window可以省略。这些历史记录以栈（FIFO）的形式保存。页面前进则入栈，页面返回则出栈。

它是一个只读对象，为了保护用户的隐私，JavaScript在获取这个对象时会受到限制。History对象不允许未授权代码访问会话历史(session history)中的其他页面地址，但可以导航到其他会话历史指向的页面。未授权代码无法清除history,也不能禁止后退/前进功能。

最接近于操作history的方法是location.replace()方法，它可以将会话历史中的当前页面地址替换成指定地址。

history的方法
history.back() 跳转到历史记录中的前一个链接

history.forward() 跳转到历史记录中的后一个链接

3.5 location
window.location可以用户获取当前页面地址以及重定向到一个新的页面。

location的属性
window.location.href 返回当前页面的地址

window.location.hostname 返回当前页面的域名

window.location.pathname 返回当前页面的路径和文件名

window.location.protocol 返回网页使用的协议（http: 还是 https:）

window.location.port 返回当前页面的端口，如果页面使用的是默认端口（http:80,https:443），则大多数浏览器会显示为0或者不显示

window.location.assgin 加载一个新的文档

3.6 navigator
navigator对象也是一个只读对象，它用来描述浏览器本身的信息，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息。

navigator有很多获得浏览器信息的办法，但是大多数办法并不提倡使用，因为它们返回的数据并不准确（如appCodeName, appName, platform等）

navigator的属性
navigator.appName 返回浏览器名称（IE11, chrome, firefox, safari都返回Netscape）

navigator.appCodeName 返回当前浏览器的内核（chrome, IE, safari和Opera都返回Mozilla）

3.7 screen
提供了用户显示屏幕的相关属性，比如显示屏幕的宽度、高度，可用宽度、高度。

screen的属性
screen.width 显示屏的宽度

screen.height 显示屏的高度

screen.width / screen.height是显示屏的宽高；

window.innerWidth / window.innerHeight 是视窗的宽高；

console.log("width: " + window.innerWidth);
console.log("height: "+ window.innerHeight);
console.log(“screeW:” + screen.width);
console.log(“screeH:” + screen.height);
我们可以测试一下这两组值的区别：

image
直接最大化打开html文件，我们可以看到视窗宽度和屏幕宽度相同，高度略有差异（因为工具栏等会占一定宽度），我们将浏览器窗口调小再测试：

image
可以看到屏幕宽高是不会随着浏览器的放大缩小而改变的，即屏幕设备大小是一个客观存在的值，除非更换设备，否则这个值是固定的。

screen.availWidth 屏幕的可用宽度

screen.availHeight 屏幕的可用高度

屏幕的可用宽高即屏幕宽高减去如工具栏的值.

console.log("swidth: " + screen.width);
console.log("sheight: "+ screen.height);
console.log(“availW:” + screen.availWidth);
console.log(“availH:” + screen.availHeight);
我们可以看看这两组值的差别：

Chrome:

image
Safari:

image
我试着将mac中的launchbar调矮了一些，测试结果随之变化：

image
在mac中，可用高度就是屏幕高度减去顶部工具栏和底部launchbar的高度（前提是launchbar在底部），如果launchbar在左右两侧，那么可用宽度就会是屏幕宽度减去launchbar宽度的值。

4. 前端弹窗
   JavaScript有三种形式的弹窗：

5. Alert box
   当你需要确保某个信息传递给用户时，使用Alert box。

Alert box弹出时，用户需要点击"OK"或者"确定"来继续下一个步骤。

alert(“I am an alert box!”);
image
2. Confirm box
当你需要用户验证或者接受某个信息时，使用confirm box。

confirm box弹出时，用户需要点击"确定"或"取消"来继续下一个步骤。

window.confirm(“Press this confirm button”);
image
3. Prompt box
当你希望用户进入页面前，先输入某个信息时，使用prompt box。

prompt box弹出时，用户需要输入一个值，然后点击"确定"或"取消"来继续下一个步骤。如果用户点击确定，prompt box会返回用户输入的值，如果用户点击取消，prompt box返回null。

var person = prompt(“Please enter your name”, “Harry Potter”); // prompt box可以输入默认值

if (person == null || person == “”) {
txt = “User cancelled the prompt.”;
} else {
txt = "Hello " + person + “! How are you today?”;
}
image
5. 计时事件
window对象运行执行特定的计时事件。JavaScript的两个关键计时事件包括：

setTimeout(fn, 毫秒数) 延时执行

setInterval(fn, 毫秒数) 循环执行

setTimeout
setTimeout即隔一定时间后将事件加入到异步队列中

取消事件使用clearTimeout

setInterval
即每隔一个间隔时间将事件加入到异步队列

取消该事件使用clearInterval

6. cookies
   Cookies用来在网页里存储用户信息。

什么是cookies
当服务器将页面发送给浏览器后，服务器与浏览器之间的连接就断开了，此时，服务器就不会记得关于用户的任何信息（HTTP协议是无状态的）。

发明cookies就是为了解决这个无状态的问题，它被用来“记住”关于用户的信息：

当用户访问页面时，他的名字就被记录在cookie中

当他下一次访问页面时，cookie就记得他的名字

cookies的存储形式就是name-value pairs（类似键值对）

username = John Doe
当浏览器向服务器发送网页请求时，对应这个页面的cookies就被加入到请求中，这样服务器就能获取到辨认这个用户所需的信息。

操作cookies的方法
JavaScript可以通过document.cookie属性来创建、读取和删除cookies。

创建cookie
我们可以在控制台中直接通过document.cookie = “username=John Doe”;来写入cookie。

写入前：

image
写入：

image
写入后：

image
读取cookie
通过document.cookie可以读取cookie

image
修改cookie
通过document.cookie重新设置已经设置过的cookie的值即可修改cookie：

image
image
删除cookie
删除cookie并不用专门使用特别的方法，只许把cookie的过期时间设置到一个过去的时间点即可。

image
名称为username的cookie就被删除了