前端，你真的知道BOM的这些用法吗？

BOM

一. BOＭ简介&写做背景

BOM简介

BOM：Broswer Object Model 浏览器对象模型

在JavaScript中能够大概的理解为，就是window对象，用来进行与浏览器相关的一些操做

学习BOM就是学习 JavaScript中的window对象

写做背景

看过 《你不知道的JavaScript》 的小伙伴都知道，书中有个这样的公式 JavaScript = ES + DOM + BOM

ES 和 DOM都是咱们耳熟能详的，在平常的开发中也是这样，绝大部分时间都在使用 ES + DOM的语法进行编程。BOM偶尔会用一下，忽然想写这一篇笔记的原因是由于前几天差点由于这一块知识的不熟悉，形成一个生产bug，好在线上测试的时候被测试同窗发现了，否则得背大锅。

通过这样一个事件，本身也在脑海里回忆了一些，对这一块的知识也是刚入门的时候，系统的过了一遍，大部分的知识都遗忘的差很少，甚至有时候须要用到的时候，百度关键词都有点费劲。综上所述，就颇有必要把这一块的知识从新学习一遍，加深记忆的同时，造成本身的笔记产出。

注：本系列文章是我的复习及提高类型笔记，简单的例子和概念不会展开说明，重点记录关键信息和重要概念，请知悉

二. window对象

BOM的核心对象是 window，它表明浏览器的一个实例。

在浏览器中，window有着双重的角色：JavaScript访问浏览器的接口对象，ES中的Global对象

这意味着网页中的任何一个对象，变量，函数都是以window做为其Global对象

​ -- 《JavaScript高级程序设计》

通俗来说就是，网页中的全部变量，对象，函数等，最终都是window对象的子属性

2.1 全局做用域

在ECMAScript中，window对象扮演着Global对象的角色，也就是说，全部在全局做用域声明的变量，函数都会变成window的属性和方法，均可以经过 window.属性名（或方法名） 直接调用

如下几点须要注意

• 使用 window.attr 声明的变量和 var 声明的变量有个区别，使用 var 声明的变量，不能使用 delete 删除，使用 window. 声明的变量能够被删除
• 在JavaScript中，尝试使用未声明的变量会抛出错误，可是经过 window 对象查询未声明的变量，只会返回 undefined

2.2 导航和打开窗口

经过 window.open() 既能够导航到一个特定的URL，也能够打开一个新的浏览器窗口

该函数接收四个参数：

• URL
• 窗口目标
• 一个新窗口的特性字符串，例：'height=400,width=400,top=10,left=10,resizable=yes'
• 布尔值，是否取代当前页面（仅在不打开新窗口的时候有效）

若是 window.open() 传递了第二个参数，且该参数是已有窗口或者框架的名称，那么就会在目标窗口加载第一个参数指定的URL

// 若是存在topFrame窗口，则在topFrame窗口打开指定url,不然新建立一个窗口并命名为topFrame

window.open('htttp://www.maxiaofei.com','topFrame')
==> <a href="http://www.maxiaofei.com" target="topFrame"></a>
复制代码

window.open() 会返回新窗口的引用，也就是新窗口的 window 对象

var myWin = window.open('http://www.maxiaofei.com','myWin')
复制代码

window.close() 仅用于经过 window.open() 打开的窗口

新建立的 window 对象有一个 opener 属性，该属性指向打开他的原始窗口对象

三. location对象

注: window.location 和 document.location 引用的是同一个对象。location 既是 window 对象的属性，也是 document 对象的属性

3.1 location对象的属性

以该url举例：http://www.baidu.com:8080/web/javascript/test.js#12345?a=10&b=20

属性名	例子	说明
hash	#12345	utl中#后面的字符，没有则返回空串
host	www.baidu.com:80	服务器名称和端口号
hostname	www.baidu.com	域名，不带端口号
href	www.baidu.com:8080/web/javascr…	完整url
pathname	web/javascript/test.js	服务器下面的文件路径
port	8080	url的端口号，没有则为空
protocol	http	使用的协议
search	?a=10&b=20	url的查询字符串，一般为？后面的内容

3.2 自定义查询字符串参数返回对象

//假设当前URL：'http://www.maxiaofei.com/Web/test.js?name=mafei&age=24&sex=m'

function getQueryObj(){
    let location = window.location;
    let queryStr = location.search.length > 0 ? location.search.substring(1) : '';
    let obj = {},item;
    let queryArr = queryStr.length > 0 ? queryStr.split('&') : []
    
    for(let i=0;i<queryArr.length;i++){
        item = queryArr[i].split('=');
        obj[item[0]] = item[1]
    }

    return obj
}

getQueryObj()
//=》{
    name: 'maxiaofei',
    age: 24,
    sex: 'm'
}
复制代码

3.3 修改location

每次修改 location 的 hash　之外的任何属性，页面都会以新URL从新加载

window.location = 'http://www.maxiaofei.com'

location.search = '?name=mafei&age=18'

location.hostname = 'www.baidu.com'

location.pathname = 'web/html/a.html'

location.port = '1234'
复制代码

除了 hash 值之外的任何修改，都会在浏览器的历史记录中生成一条新的记录，能够经过浏览器的回退按钮导航到前一个页面，能够经过 replace() 方法禁止这种行为，使用 replace 打开的页面，不能返回到前一个页面

// 尝试在浏览器控制台输入以下代码，浏览器将不支持回退
location.replace('http://www.baidu.com')
复制代码

3.4 从新加载

经过 location.reload() 方法能够从新加载页面

• location.reload() : 从新加载（有可能会从缓存中加载）
• location.reload(true)： 从新加载（从服务器从新加载）

四. navigator对象

navigator 对象主要用来获取浏览器的属性，区分浏览器类型

navigator 对象属性较多，且兼容性比较复杂，点击了解更多navigator属性

五. history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，由于 history 是 window 对象的属性，所以每一个浏览器窗口，每一个标签乃至每一个框架，都有本身的 history对象与特定的 window 对象关联

​ -- 《JavaScript高级程序设计》

history 经常使用的有以下3个方法和一个属性

1. history.go()

• 接收一个整数数字或者字符串参数：向最近的一个记录中包含指定字符串的页面跳转

history.go('maixaofei.com')		//向前或者向后寻找指定字符串页面，没有找到则无响应
复制代码

• 当参数为整数数字的时候，正数表示向前跳转指定的页面，负数为向后跳转指定的页面

history.go(3)	//向前跳转三个记录
history.go(-1)	//向后跳转一个记录
复制代码

2. history.forward()

• 向前跳转一个页面

3. history.back()

• 向后跳转一个页面

4. history.length

• 获取历史记录数，若是是打开的第一个页面，则 history.length == 0，能够用该属性来判断当前打开的网页是否是该窗口打开的首个网页

总结

本文主要介绍了浏览器对象模型（BOM）中几个经常使用的对象，主要包括 navigator，window, location, history

1. window既是 JavaScript 的全局对象，也是BOM的一个实例，全部的全局方法，属性，BOM中的属性，均可以经过 window. 来调用
2. window做为BOM的实例，最经常使用的几个方法分别是：window.open()，window.close()，，分别用来打开和关闭浏览器窗口页面，这里须要注意的是，经过 open 方法打开的页面，才能经过close 方法关闭
3. location对象也是用的比较多的一个BOM对象，主要用来操做URL相关的一些信息，除了修改 Hash 以外的任何属性，页面都会从新加载，历史记录会多加一条历史记录
4. location对象还有一个 reload() 方法用于手动从新加载页面，该方法接收一个可选参数，为 true 的时候表示从服务器从新加载，不然可能从浏览器缓存中从新加载页面
5. location对象 还有一个比较特殊的方法，location.replace()，该方法能够覆盖当前页面并从新加载，同时不会在 history 中生成历史记录
6. navigator对象主要用来获取浏览器相关的一些信息，使用的时候须要注意兼容性。能够用来获取浏览器类（Chrome,safrai,FireFox,Edge,IE）等等
7. history对象主要用来操做浏览器URL的历史记录，能够经过参数向前，向后，或者向指定URL跳转。能够经过 length 属性获取记录数，判断当前页面是不是打开的首个页面