前端,你真的知道BOM的这些用法吗?

6,105 阅读6分钟

BOM

一. BOM简介&写作背景

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.locationdocument.location 引用的是同一个对象。location 既是 window 对象的属性,也是 document 对象的属性

3.1 location对象的属性

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

属性名例子说明
hash#12345utl中#后面的字符,没有则返回空串
hostwww.baidu.com:80服务器名称和端口号
hostnamewww.baidu.com域名,不带端口号
hrefwww.baidu.com:8080/web/javascr…完整url
pathnameweb/javascript/test.js服务器下面的文件路径
port8080url的端口号,没有则为空
protocolhttp使用的协议
search?a=10&b=20url的查询字符串,通常为?后面的内容

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

每次修改 locationhash 以外的任何属性,页面都会以新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 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为 historywindow 对象的属性,因此每个浏览器窗口,每个标签乃至每个框架,都有自己的 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)中几个常用的对象,主要包括 navigatorwindow, 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 属性获取记录数,判断当前页面是否是打开的首个页面