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

海海呐

已于 2022-06-29 09:41:17 修改

阅读量197

点赞数 2

分类专栏： WebAPI 文章标签：前端

于 2021-08-21 22:01:17 首次发布

本文链接：https://blog.csdn.net/m0_56344602/article/details/119845606

版权

WebAPI 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

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>