[js]BOM篇

一、什么是BOM

• BOM（Browser Object Model）即浏览器对象模型。
• BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
• 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

二、window对象

• 浏览器里面，window对象指当前的浏览器窗口。
• 它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。
• 一个变量如果未声明，那么默认就是顶层对象的属性。

1、Window的属性

　　1.1  window.name 属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字，这个属性主要配合超链接和表单的target属性使用

　　1.2 window.closed，window.opener

　　(1) window.closed属性返回一个布尔值，表示窗口是否关闭

　　(2) window.opener属性表示打开当前窗口的父窗口。如果当前窗口没有父窗口（即直接在地址栏输入打开），则返回null

　　1.3 window.self和window.window属性都指向窗口本身。这两个属性只读

window.self === window // true
window.window === window // true

　　1.4 window.frames属性返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口

• 如果iframe元素设置了id或name属性，那么就可以用属性值，引用这个iframe窗口。比如<iframe name="myIFrame">可以用frames['myIFrame']或者frames.myIFrame来引用
• frames属性实际上是window对象的别名
• window.length属性返回当前网页包含的框架总数。如果当前网页不包含frame和iframe元素，那么window.length就返回0

frames === window // true
window.frames.length === window.length // true

　　1.5 window.frameElement属性主要用于当前窗口嵌在另一个网页的情况（嵌入<object>、<iframe>或<embed>元素），返回当前窗口所在的那个元素节点。如果当前窗口是顶层窗口，或者所嵌入的那个网页不是同源的，该属性返回null。

// HTML 代码如下
// <iframe src="about.html"></iframe>

// 下面的脚本在 about.html 里面
var frameEl = window.frameElement;
if (frameEl) {
  frameEl.src = 'other.html';
}
上面代码中，frameEl变量就是<iframe>元素。

　　1.6   window.top属性指向最顶层窗口，主要用于在子窗口里面获取顶层的父窗口。

　　　　window.parent属性指向父窗口。如果当前窗口没有父窗口，window.parent指向自身

　　1.7 window.devicePixelRatio属性返回一个数值，表示一个 CSS 像素的大小与一个物理像素的大小之间的比率。也就是说，它表示一个 CSS 像素由多少个物理像素组成。它可以用于判断用户的显示环境，如果这个比率较大，就表示用户正在使用高清屏幕，因此可以显示较大像素的图片

　　1.8 window对象的位置信息和大小信息

　　（1）window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读

　　（2）window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读

　　（3）window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读

　　（4）window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读

　　（5）window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名

　　1.9 window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。如果是 HTTPS 协议，就是true，否则就是false

2、window对象的方法

　　2.1 window.alert()  方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息

　　2.2 window.confirm()方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意

　　2.3 window.prompt()方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据

　　2.4 window.open方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，如果无法新建窗口，则返回null　　

window.open(url, windowName, [windowFeatures])

• url：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
• windowName：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。
• windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数。

　　2.5 window.close方法用于关闭当前窗口，一般只用来关闭window.open方法新建的窗口

　　2.6 window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象

　　2.7 window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素

　　2.8 window.moveBy方法将窗口移动到一个相对位置。它接受两个参数，分布是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素

　　2.9 window.resizeTo()方法用于缩放窗口到指定大小。

　　2.10 window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标

　　window.scrollTo(options)

• top：滚动后页面左上角的垂直坐标，即 y 坐标。
• left：滚动后页面左上角的水平坐标，即 x 坐标。
• behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto

　　2.11 window.print方法会跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同。

　　2.12 window.focus()方法会激活窗口，使其获得焦点，出现在其他窗口的前面

　　2.13 window.blur()方法将焦点从窗口移除

　　2.14 window.getSelection方法返回一个Selection对象，表示用户现在选中的文本

　　2.15 window.getComputedStyle()方法接受一个元素节点作为参数，返回一个包含该元素的最终样式信息的对象

　　2.16 window.matchMedia()方法用来检查 CSS 的mediaQuery语句

三 、Navigator 对象

　　window.navigator属性指向一个包含浏览器信息的 Navigator 对象。脚本通过这个属性了解用户使用的是哪一种浏览器

　　1、navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

　　通过userAgent属性识别浏览器，用户可以改变这个字符串通过userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串/mobi|android|touch|mini/i.test(ua)

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

　　2、Navigator.plugins属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等

var pluginsLength = navigator.plugins.length;

for (var i = 0; i < pluginsLength; i++) {
  console.log(navigator.plugins[i].name);
  console.log(navigator.plugins[i].filename);
  console.log(navigator.plugins[i].description);
  console.log(navigator.plugins[i].version);
}

　　3、Navigator.platform属性返回用户的操作系统信息，比如MacIntel、Win32、Linux x86_64等

navigator.platform
// "Linux x86_64"

　　4、navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。

　　有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的onLine属性会返回true，所以不能假定只要是true，用户就一定能访问互联网。不过，如果是false，可以断定用户一定离线。

navigator.onLine // true

　　5、Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读。

　　　　Navigator.languages属性返回一个数组，表示用户可以接受的语言。　　

navigator.language // "en"
navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

　　6、Navigator.geolocation属性返回一个 Geolocation 对象，包含用户地理位置的信息。注意，该 API 只有在 HTTPS 协议下可用，否则调用下面方法时会报错

• Geolocation.getCurrentPosition()：得到用户的当前位置
• Geolocation.watchPosition()：监听用户位置变化
• Geolocation.clearWatch()：取消watchPosition()方法指定的监听函数

　　7、Navigator.cookieEnabled属性返回一个布尔值，表示浏览器的 Cookie 功能是否打开

　　 8、Navigator.javaEnabled()方法返回一个布尔值，表示浏览器是否能运行 Java Applet 小程序

四、History对象

　　window.history属性指向 History 对象，它表示当前窗口的浏览历史

　　1、属性

　　（1）History.length：当前窗口访问过的网址数量

　　（2）History.state：History 堆栈最上层的状态值

　　2、方法

• History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
• History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
• History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面
• history.go(0)相当于刷新当前页面。

　　2.1 History.pushState()方法用于在历史中添加一条记录

window.history.pushState(state, title, url)

• state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
• title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
• url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

　　2.2 History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样

history.pushState({page: 1}, 'title 1', '?page=1')
// URL 显示为 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 显示为 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 显示为 http://example.com/example.html?page=3
history.back()
// URL 显示为 http://example.com/example.html?page=1
history.back()
// URL 显示为 http://example.com/example.html
history.go(2)
// URL 显示为 http://example.com/example.html?page=3

　　3、popstate 事件

　　每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件

　　仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};

// 或者
window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

　　回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数）。上面代码中的event.state，就是通过pushState和replaceState方法，为当前 URL 绑定的state对象

var currentState = history.state;

　　4、URLSearchParams API

五、浏览器数据储存机制

　　Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage

　　1、Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

　　2、Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

　　3、Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

window.sessionStorage.clear()
window.localStorage.clear()

　　4、Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值。

window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"

for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));
}

　　5、Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

window.addEventListener('storage', onStorageChange);

　　监听函数接受一个event实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。

• StorageEvent.key：字符串，表示发生变动的键名。如果 storage 事件是由clear()方法引起，该属性返回null。
• StorageEvent.newValue：字符串，表示新的键值。如果 storage 事件是由clear()方法或删除该键值对引发的，该属性返回null。
• Storage.oldValue：字符串，表示旧的键值。如果该键值对是新增的，该属性返回null。
• Storage.storageArea：对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。
• Storage.url：字符串，表示原始触发 storage 事件的那个网页的网址。

function onStorageChange(e) {
  console.log(e.key);
}
window.addEventListener('storage', onStorageChange);