js基础知识--BOM

之前说过，在js的 运行环境为浏览器时,js就主要有三部分组成:

ECMAScript核心语法、BOM、DOM。今天就和大家详细说一下BOM的一些基础知识。

BOM

BOM通常被称为浏览器对象模型，主要描述了与浏览器交互的方法和接口。

作为JavaScript的一部分，因为每个浏览器对自己的BOM的实现方式不同，BOM并没有任何标准。

BOM主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM的一部分。扩展包括：

-弹出新的浏览器窗口

-移动、关闭浏览器窗口以及调整窗口大小

-提供Web浏览器的详细信息的定位对象

-提供用户屏幕分辨率想信息的屏幕对象

-对cookie的支持

-IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

虽然每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

下面是一些BOM当中包含的对象。

-Window对象

-Navigator对象

-Screen对象

-History对象

-Location对象

window对象

浏览器里面，window对象指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属

常用window对象的属性

window.open()方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口。

window.close()方法关闭窗口。

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

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

window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0。

Navigator对象

window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。

Navigator属性

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

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

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

Screen 对象

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。

Screen常用属性

Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。

Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）

Location对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。

Location对象常见属性

-Location.href：整个 URL。

-Location.protocol：当前 URL 的协议，包括冒号（:）。

-Location.host：主机，包括冒号（:）和端口（默认的80端口和443端口会省略）。

-Location.hostname：主机名，不包括端口。

-Location.port：端口号。

-Location.pathname：URL 的路径部分，从根路径/开始。

-Location.search：查询字符串部分，从问号?开始。

-Location.hash：片段字符串部分，从#开始。

-Location.username：域名前面的用户名。

-Location.password：域名前面的密码。

-Location.origin：URL 的协议、主机名和端口。

相关方法

assign()方法接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。

replace()方法接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL。如果参数不是有效的 URL 字符串，则会报错。

它与assign方法的差异在于，replace会在浏览器的浏览历史History里面删除当前网址，也就是说，一旦使用了该方法，后退按钮就无法回到当前网页了，相当于在浏览历史里面，使用新的 URL 替换了老的 URL。它的一个应用是，当脚本发现当前是移动设备时，就立刻跳转到移动版网页。

reload()方法使得浏览器重新加载当前网址，相当于按下浏览器的刷新按钮。

toString()方法返回整个 URL 字符串，相当于读取Location.href属性。

History 对象

History对象表示当前窗口的浏览历史

History对象常用属性

History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。

History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。

History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。