BOM

BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

window

window对象是BOM的核心，他表示浏览器的一个实例。它是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象。

window对象属性

window.innerHeight属性，window.innerWidth属性

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。很显然，当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。
注意，这两个属性值包括滚动条的高度和宽度。

scrollX、scrollY

scrollX：滚动条横向偏移
scrollY：滚动条纵向偏移
这两个值随着滚动位置变化而变化

scrollTo、scrollBy、scroll

我们也可以通过方法scrollTo或者scroll方法改变滚动条位置到指定坐标

window.scrollTo(0, 300); // 滚动条移动到300px处

scrollBy可以相对当前位置移动滚动条，而不是移动到绝对位置

scrollBy(0, 100); // 滚动条下移100px

window.frames
window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每个成员对应的是框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

在iframe框架内部，使用window.parent指向父页面。

navigator

navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。下面是Chrome浏览器的User-Agent。

navigator.userAgent // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36"

window.getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])

   var style = window.getComputedStyle("元素", "伪类");

URL的编码/解码方法

JavaScript提供四个URL的编码/解码方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()

区别

encodeURI方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1. ASCII字母
2. 数字
3. ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。