BOM  即 Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API

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

     window对象是js中的*对象(全局对象)，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。

　　BOM>window>document>getElementById()

 

 

 

一、window对象

　　三个弹框：不建议使用，会阻塞代码执行---仅接收纯文本消息

1             window.alert('警告框')
2             window.confirm('确认框')  if(isFlag){log(确认键)}else{log(取消键)}
3             window.prompt('请输入一个数字') 输入框 返回内容

　　宽高表示：

        // 窗口的可视宽度和可视高度
        console.log(window.innerHeight);
        console.log(window.innerwidth);
        // html的宽度和高度
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);

　　窗口的打开关闭移动：

open：URL,name,features,replace

1             // 打开一个新窗口  _self在自己原本的窗口打开页面"_blank"在新窗口打开页面
2             // window.open("http://www.baidu.com","_self")
3             window.open("2.html","_blank","width:200;height:300")
4             // 关闭当前窗口
5             window.close()
6             // 把窗口移动到距离电脑显示屏左上的坐标  ie可用,火狐、谷歌不可用
7             window.moveTo(100,100)
8             // 重新调整浏览器窗口大小  ie可用,火狐、谷歌不可用
9             window.resizeTo(200,200)

属性	说明
alert()	系统警告对话框，接收字符串参数并显示
confirm()	系统确认对话框，可提供确认或取消两种事件
prompt()	提示对话框，可对用户展示确认、取消事件外，还可提供文本域
open()	可导航至特定的 url，又可打开一个新的浏览器窗口window.open(要加载的url, 窗口目标, 一个特定字符串, 一个新页面是否取代浏览器历史记录中当前加载页面的布尔值)
onerror()	事件处理程序，当未捕获的异常传播到调用栈上时就会调用它，并把错误消息输出到浏览器的 JavaScript 控制上。window.onerror(描述错误的一条消息, 字符串--存放引发错误的JavaScript代码所在的文档url, 文档中发生错误的行数)
setTimeout()	超时调用——在指定的时间过后执行代码window.setTimeout(function(){...}, 毫秒)
setInterval()	间歇调用——每隔指定的时间就执行一次window.setInterval(function(){...}, 毫秒)

1、确认窗口位置及大小
获取窗口位置的属性与方法

属性	说明	兼容性
screenLeft	窗口相对于屏幕左边的位置	适用于IE、Safari、Chrome
screenTop	窗口相对于屏幕上边的位置	适用于IE、Safari、Chrome
screenX	窗口相对于屏幕左边的位置	适用于Firefox
screenY	窗口相对于屏幕上边的位置	适用于Firefox
moveBy(x,y)	接收的是在水平和垂直方向上移动的像素数	全兼容
moveTo(x,y)	接收的是新位置的x和y坐标值	全兼容

跨浏览器获取窗口左边和上边位置

窗口大小属性与方法

 

属性	说明
innerWidth innerHeight	IE9+、Safari、Firefox、Opera: 该容器中页面视图区的大小 Chrome: 返回视口大小 移动设备： 返回可见视口（即屏幕上可见页面区域的大小） 移动IE浏览器： 不支持该属性,当移动IE浏览器将布局视口的信息保存至document.body.clientWidth与document.body.clientHeight中
outerWidth outerHeight	IE9+、Safari、Firefox: 返回浏览器窗口本身的尺寸 Opera: 返回页面视图容器的大小 Chrome: 返回视口大小
resizeTo(width, height)	接收浏览器窗口的新宽度与新高度
resizeBy(width, height)	接收新窗口与原窗口的宽度与高度之差

二、navigator对象

　　navigator：包含客户端浏览器的信息 主要用来检测浏览器、检测插件

1         navigator.appCodeName //浏览器的代码名称
2         navigator.appName   //返回浏览器的名称
3         navigator.appVersion  // 返回浏览器的平台和版本信息 
4         navigator.language  // 返回浏览器的语言
5         navigator.onLine     // 返回指明系统是否处于脱机状态下的布尔值
6         navigator.userAgent  // 运营商/浏览器的名称
7         navigator.platform   //返回运行操作系统的平台

三、location对象

　　location：包含当前网页的URL信息  主要应用场景：

1、解析 url 查询字符串参数，并将其返回一个对象，可通过循环、正则来实现，方法有很多,实现的大体思路是：
通过location的search属性来获取当前 url 传递的参数，如果 url 中有查询字符串的话就将其问号截取掉，然后再遍历里面的字符串并以等号为断点，使用decodeURIComponent()方法来解析其参数的具体数值，并将其放在对象容器中，并将其返回
2、载入新的文档，也可以说是刷新页面，主要有三个方法：

• assign()： location.assign("http://www.xxx.com")就可立即打开新 url 并在浏览器是我历史中生成一条新的记录, 在一个生成了 5 条浏览记录的页面中，然后使用 assign()跳转 url 后，history 记录只剩两条，一条是通过 assign 跳转的页面，另一条则是上一个页面（使用 assign()跳转方法的页面），其余的所有页面都被清除掉了
• replace(): location.replace("http://www.bbb.com")只接受 url 一个参数，通过跳转到的 url 界面不会在浏览器中生成历史记录，就是 history 的 length 不会+1，但是会替代掉当前的页面
• reload(): 其作用是重新加载当前显示的页面，当不传递参数的时候，如果页面自上次请求以来并没有改变过，页面就会从浏览器中重新加载，如果传递true，则会强制从服务器重新加载

属性名	例子	说明
hash	" #host "	返回 url 中的 hash（#后字符>=0）
host	" juejin.im:80 "	服务器名称+端口（如果有）
hostname	" juejin.im "	只含服务器名称
href	" https://juejin.im/book/5a7bfe... "	当前加载页面的完整的 url
pathname	" /book/5a7bfe595188257a7349b52a "	返回 url 的的目录和（或）文件名
port	" 8080 "	url 的端口号，如果不存在则返回空
protocol	" https: (or http:) "	页面使用的协议
search	" ?name=aha&age=20 "	返回 url 的查询字符串， 以问号开头

四、history对象

　　history：包含浏览器窗口访问过的URL信息              history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，history 对象是用窗口的浏览历史用文档和文档状态列表的形式表示。history 对象的 length 属性表示浏览历史列表中的元素数量，但出于安全考虑，脚本不能访问已保存的 url

        back() 后退一个页面         go() 跳转到指定页面         forward() 前进一个页面

• History 对象的属性及方法

属性	说明
go()	1、以在用户的历史记录中任意跳转，go(n)表示前进 n 页， go(-n)表示后退 n 页(n>0) 2、go()可以传递字符串参数，浏览器历史中如果有这条 url 则实现跳转至包含该字符串的第一个位置，否则什么也不做
back()	后退一页
forword()	前进一页
length	保存历史记录的数量，可用于检测当前页面是否是用户历史记录的第一页（history.length === 0）

五、screen对象

　　screen：包含客户端显示屏的信息 其提供有关窗口显示的大小和可用的颜色输入信息。

 

 

 

六、document对象

　　document：包含整个HTML文档，可悲用来访问文档内容,及其所有的页面元素