【JavaScript基础】BOM介绍

BOM（Browser Object Model）即浏览器对象模型，它提供了一些对象用来与浏览器进行交互，其核心对象是 window。

1. window

window 对象是浏览器的顶级对象，是 JS 访问浏览器窗口的一个接口。也是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

注：在调用的时候可以省略 window

window 对象的方法：alert()、prompt()、confirm()、setInterval()、setTimeout()、open()等。

window对象提供了两个定时器函数：setInterval() 和 setTimeout()。 具体的可以看看之前写的这篇文章《js中常用的两种定时器》

2. window 对象的常见事件

• 窗口加载事件

  window.onload = function(){};
  window.addEventListener("load",function(){}); 
  

  window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等)。

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。

window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个为准。如果使用 addEventListener 则没有限制

• 调整窗口大小事件

  window.onresize = function(){}
  window.addEventListener("resize",function(){}); 
  

  window.onresize 是调整窗口大小加载事件

注意：

• 只要窗口大小发生像素变化，就会触发这个事件。
• 经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

3. location 对象

​ 用于获取或设置窗体的 URL，并且可以用于解析 URL

• 统一资源定位符 (Uniform Resource Locator, URL)

  是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

​ URL 的一般语法格式为：protocol://host[:port]/path/[?query]#fragment

protocol：通信协议 （常用的http、ftp等）
host: 主机（域名）
port: 端口号（可选，省略时使用协议默认端口，如http的默认端口为80）
path: 路径（是零或多个‘/’隔开的字符串）
qurey: 参数（以通过‘&’隔开的键值对形式展示）
fragment： 片段（#后面的内容，常见于链接锚点）

• location 对象的属性

属性	说明
herf	设置或者返回参数url
host	返回主机名（域名）
port	返回端口号
pathname	返回路径
search	返回参数

• location对象的常见方法

方法	说明
assign()	重定向页面（和href一样，可以跳转页面）
replace()	替换当前页面，不能操作页面前进、后退
reload()	重载当前页面，相当于刷新按钮或者f5(如果参数为true，则为强制刷新 ctrl+f5)

4. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户端发送服务器的 user-agent 头部的值,可以判断用户使用什么终端打开页面

判断当前环境是移动端还是 PC 端

function isPc() {
  var userAgentInfo = navigator.userAgent
  var Agents = new Array(
    'Android',
    'iPhone',
    'SymbianOS',
    'Windows Phone',
    'iPad',
    'iPod'
  )
  var flag = true
  flag = !Agents.some((ele) => {
    return userAgentInfo.indexOf(ele) > 0 
  })
  return flag
}
isPc() 

5. history 对象

history 对象可以操作浏览器历史记录。该对象包含用户（在浏览器窗口中）访问过的 URL。（ 一般在OA 办公系统中使用）

方法	说明
history.back()	后退功能，相当于浏览器的后退按钮
history.forword()	前进功能，相当于浏览器的前进按钮
history.go(带参数)	跳转到指定的页面，参数为指定页面的位置，如果为负数则表示后退。还可以是一个字符串类型的url

6. screen对象

该对象用于获取有关客户端显示屏幕的一些信息

属性	说明
height	返回整个浏览器的高度
width	返回整个浏览器的宽度
pixelDepth	返回屏幕的分辨率