WebApi入门第九章（BOM浏览器对象模型）

1.BOM与DOM介绍

JavaScript语言由三部分组成

ECMAJavaScript：定义了js的语法规范

Dom：document object model文档对象模型：一个HTML文档中所有的一切都是dom对象

  * Dom定义了一套操作HTML文档的API（节点的增删改查）

Bom：Browser object model浏览器对象模型 例如：一个浏览器的窗口就是一个window对象

  * Bom定义了一套操作浏览器窗口的API

Bom主要由五大对象组成：

window：浏览器核心对象

location：包含当前页面的URL信息

history：history对象主要用于记录你当前窗口的历史记录

navigator：包含当前浏览器的信息，例如用的什么浏览器，操作系统版本等

screen：获取用户电脑的屏幕分辨率

2.window对象

1.window对象：指的是当前浏览器窗口，它是JS中的顶级对象

(1).所有的全局变量（var声明的）都是window对象的属性：最顶级的对象

document对象

bom对象

全局的方法：alert(),setInterval()...........

(2).只要是window的属性和方法，在使用的时候都可以省略window

例如：window.alert() 可以省略window写成alert()

例如：window.document 可以省略window写成document

(3).window对象有一个特殊属性叫做name

它永远都是一个字符串，无论给他赋什么值

2.window对象有两个常用的方法：open()与close()

open():打开一个窗口

close():关闭一个窗口

3.window对象三个事件

window对象有三个事件，记录了浏览器窗口从打开到关闭的三个过程

1.window.onload:界面上所有的内容加载完毕之后才触发这个事件

2.window.onbeforeunload:界面在关闭之前会触发这个事件

3.window.onunload:界面在关闭的那一瞬间会触发这个事件

       点击某个离开页面的链接

       在地址栏中键入了新的 URL

       使用前进或后退按钮

       关闭浏览器窗口

       重新加载页面

4.location对象

1.location对象：包含当前页面的URL信息

url：统一资源定位符

url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径

2.location对象有三个常用的方法

（1）打开新网页：location.assign('你要打开的新网页的url')

（2）替换当前网页：location.replace('要替换的网页url')

 (3) 刷新当前网页: location.reload()

5.history对象

history对象主要用于记录当前窗口的历史记录

主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）

history.forward():前进

history.back():后退

6.navigator对象

navigator对象：包含当前浏览器的信息

应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）

<script>
    /*navigator对象：包含当前浏览器的信息
        工作中应用场景：用户信息统计（统计我这个网站平台的用户群体分布，什么浏览器，windows什么版本等）
     */
    console.log ( navigator );//navigator对象
    console.log ( navigator.appVersion );   // 当前浏览器版本信息
    console.log ( navigator.platform );     // 当前浏览器的硬件平台
    console.log ( navigator.userAgent );    // 当前浏览器信息
    // 使用场景1：判断当前用户的操作系统是32位还是64位
    // 谷歌和IE  64位显示WOW64    火狐显示Win64
    if(navigator.userAgent.indexOf('WOW64') != -1 || navigator.userAgent.indexOf('Win64') != -1){
        console.log ( "64位" );
    }else{
        console.log ( "32位" );
    }
    // 使用场景2：判断用户当前使用哪种浏览器
    if(navigator.userAgent.indexOf('Chrome') != -1){
        console.log ( "谷歌浏览器" );
    }else if(navigator.userAgent.indexOf('Firefox') != -1){
        console.log ( "火狐浏览器" );
    }else{
        console.log ( "IE浏览器" );      // 也有可能是其他小众浏览器，可以忽略不计
    }
</script>
</html>