BOM（浏览器对象模型）

简介

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

window

BOM的和新对象，它表示浏览器的一个实例。既是js访问浏览器的一个接口，又是ECMAScript规定的global对象。

全局作用域

所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法。
* 全局变量不能通过delete操作符删除，直接在window对象上定义的属性则可以。
* 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在

窗口关系及框架

如果页面包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。
* top：始终指向最高最外层的框架，也就是浏览器窗口
* parent：始终指向当前框架的直接上层框架
* self：self可以和window对象互换，引入它的目的是为了和top，parent对应

窗口位置

screenLeft
screenTop
screenX
screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。
IE、Safari 、Chrome和 Opera 支持 screenLeft 和 screenTop
Firefox、Chrome 和 Safari 支持 screenX 和 screenY，Opera虽然支持但是和前两个不对应

      //兼容代码      var leftPos=(typeof window. screenLeft=="number”) ;      window. screenLeft :window. screenX;      var topPos= (typeof window.screenTop=="number") ;      window. screenTop:window. screenY;

window.moveTo();
window.moveBy();
窗口移动

窗口大小

outerHeight
outerWidth
窗口的高宽度，包括窗口界面上的所有元素（如：工具条、滑动条）。
innerHeight
innerWidth
页面视图区的大小，减去边框宽度。
注意，在chrome中两者返回相同的值，都是视口（viewport）大小，而不是浏览器大小。

在IE、Safari 、Firefox、Chrome和 Opera中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口信息。IE6在标准模式下有效，混杂模式需要document.body.clientWidth和document.body.clientHeight。

window.resizeTo();
window.resizeBy();
窗口调整大小

导航和打开窗口

window.open(url,name,features，replace)
* url：指定要打开的页面的URL;省略时，”about：blank”，即：窗口中不显示任何文档。
* name：指定target属性值或窗口的名称，blank： 在新窗口打开URL；_parent: 在上级窗口打开URL ；_self: 新URL替换当前页面；_top: URL可装载到任何框架中；name: 窗口的名称（注：名称不能用于指定新窗口的标题）
* features：任意，一个用逗号分隔的项目列表，设定新窗口的特征，可以指定多数值，之间用逗号分隔，不能含有空字符。
* replace：任意，布尔值，规定加载的URL是在窗口浏览器历史中创建一个新条目，还是替换浏览器历史中的当前条目。true:加载的URL替换浏览器历史中的当前条目，false:浏览器历史中创建新条目

间歇调用和超时调用

setTimeout()方法调用一个函数或者指定时间计算表达式。setTimeout()方法经过指定的时间只执行一次。使用clearTimeout()方法阻止函数运行。

setInterval()方法调用一个函数或者指定时间间隔计算表达式。setInterval()方法将持续调用函数，除非调用了clearInterval()方法，或者关闭了窗口。一般情况下，setInterval()方法返回的ID值用于clearInterval()方法的参数。

系统对话框

alert()
confirm()
prompt()

find()
print()

location对象

Location对象内容纳了当前文档URL的信息。
Location对象是Window对象的一部分，可以通过window.location属性访问。同时也是document的对象。

属性：
* hash 设置或返回以#开头的URL的部分锚点
* host 设置或返回URL的主机名和端口号
* hostname 设置或返回URL的主机名
* href 设置或返回URL的整体
* origin 返回URL的协议，主机名和端口号
* pathname 设置或返回URL的路径
* port 设置或返回URL使用的服务器端口号
* protocol 设置或返回当前文档URL的协议
* search 设置或返回当前文档URL的查询字符串部分

查询字符串参数

字符串到数组的分割

位置操作

location.assgin();
window.location=”“;
location.href=”“;（以上部分属性可以通过这种方式改变，除了hash，其他都会重新加载页面）
改变当前加载页面，生成一条历史记录

location.replace();
刷新当前文档，历史记录不会生成新纪录，无法回退到前一个页面

location.reload();
刷新当前文档

navigator

通常用于检测显示网页的浏览器类型

检测插件

1.navigator.plugins
包括属性：
name
discription
filename
length
检测采用navigator.plugins[0].name

2.IE
new ActiveXObject(name);
创建一个特定插件实例，若实例已存在，则会报错，以此来检测实例存在与否

浏览器名称

使用appName属性返回浏览器的名称。
navigator.appName
IE11,Firefox,Chrome和Safari返回“Netscape”
IE10及更早版本返回“Microsoft Internet Explorer”
Opera返回“Opera”

浏览器版本信息

appVersion属性返回浏览器的版本信息。

浏览器是否开启cookie

使用cookieEnabled属性返回布尔值，表示浏览器是否开启了cookies。

浏览器的语言版本

language属性返回浏览器的语言版本

浏览器工作状态

online属性返回布尔值，表示浏览器是在线工作还是离线工作。

浏览器编译平台

platform属性返回浏览器被编译的平台。

浏览器引擎

product属性返回浏览器的引擎名称

浏览器向服务器发送的用户代理头文件

userAgent属性返回由浏览器向服务器发送的用户代理头文件。

定位用户位置

geolocation属性返回用于定位用户位置的Geolocation对象

screen

用处不大，表明客户端的能力。包括像素宽度/高度。W3C没有把Screen对象纳入标准化，但是各大主流浏览器都支持。
* availHeight 返回屏幕的高度（不包括窗口的任务栏）
* availWidth 返回屏幕的宽度（不包括窗口的任务栏）
* colorDepth 返回屏幕陈列图像时的颜色深度
* height 返回屏幕的总体高度
* pixelDepth 返回屏幕的彩色分辨率
* width 返回屏幕的总体宽度

history

History对象内容纳了用户返回过的URL（浏览器窗口中）。
History对象是窗口对象的一部分，可以通过window.history属性访问。
注：W3C没有把History对象纳入标准化，但是各大主流浏览器都支持。
* length 返回浏览历史列表中URL的数量
* back() 加载浏览历史列表中之前的URL（网址）
* forward() 加载浏览历史列表中之后的URL（网址）
* go() 从浏览历史列表中加载指定的URL（网址）