BOM

概述

BOM (Browser Object model 浏览器对象模型)，主要是对应的浏览器内容的相关操作对象。它缺乏规范，利用共有对象来解决每个浏览器不一致的问题。

BOM主要的内容

window 浏览器窗口
location 地址栏 *
history 历史对象 *
navigator 导航对象
screen 屏幕对象
document 文档对象
frames 子窗口对象实际它也是一个window

window对象

window对象是浏览器global对象，它表示浏览器的窗口。里面具备相关方法及内容。所有的全局属性及对应的全局方法都是它的子内容。bom其他的相关内容都是window的子元素（属性）。

属性

caches 浏览器缓存
crypto 浏览器的加密模块
indexedDB 浏览器的数据库
innerHeight,innerWidth 浏览器显示区域的宽高
localStorage,sessionStorage 浏览器的本次存储
console 浏览器控制台对象
....

//相关属性
console.log(window.caches) //浏览器缓存
console.log(window.clientInformation) //客户端详情 返回一个navigator对象
console.log(window.closed) //是否关闭
console.log(window.crypto) //加密包
console.log(window.indexedDB) //浏览器自带数据库 （存储其他地方存储不了的数据 存储数据大）
console.log(window.innerHeight,window.innerWidth) //获取窗口的高度 获取窗口的宽度 显示内容部分
console.log(window.localStorage) //本地存储
console.log(window.sessionStorage) //本地存储
console.log(window.console) //获取控制台对象
console.log(window.document)
console.log(window.history)
console.log(window.location)
console.log(window.frames)

方法（window对象可以被省略）

打印相关方法

//打印相关的方法
console.log('日志打印')
console.debug('调试打印')
console.error('错误打印')
console.info('信息打印')
console.dir('文件打印')
console.warn('警告打印')
//清空控制台
console.clear()

弹窗相关方法

alert
confirm
prompt

alert('信息弹窗')
//输入弹窗 返回输入的字符串
var str =  prompt('输入弹窗')
console.log(str)
//交互弹窗 接收一个boolean类型的值 点击确认返回true 点击取消返回false
var is = confirm('您是否要删除')
console.log(is)

打开和关闭窗口的方法

open

//打开窗口
//相关配置
// width=1024 窗口宽度；
// height=700 窗口高度；
// top=0 窗口距离屏幕上方的象素值；
// left=0 窗口距离屏幕左侧的象素值；
// titlebar=no 是否显示标题栏，被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes；
// menubar=no 表示菜单栏，默认值是yes；
// scrollbars=yes 是否显示滚动条，默认值是yes；
// resizable=no 是否允许改变窗口大小，默认值是yes；
// status=no 是否要添加一个状态栏，默认值是yes；
// toolbar=no 是否显示工具栏，默认值是yes；
// location=no 是否显示地址栏，默认值是yes；
//打开窗口url地址 相关打开方式（_self 自身打开 _blank 新的页面） 窗口的相关配置
window.open('http://www.baidu.com','_blank','width=20,height=40,top=0,left=0')

close 关闭自身的窗口
```
window.close()
```

窗口位置移动的方法

moveTo 传入对应的x，y坐标移动到这个坐标

//100,100
window.moveTo(200,200) //移动到坐标200,200的位置

moveBy 传入对应的需要移动的距离在原本的基础上移动这个距离
```
//100,100
window.moveBy(200,200) //移动到坐标300,300的位置
```

窗口大小的更改的方法

resizeTo 传入对应的宽高更改到这个宽高的大小
```
//100,100
window.resizeTo(200,200)  //200,200
```
resizeBy 传入对应的宽高在原本的大小上增加对应的宽高
```
//100,100
window.resizeBy(200,200)  //300,300
```

滚动栏的位置更改 (x,y)

scrollTo 传入x,y坐标移动到这个坐标

//50,50
window.scrollTo(100,100) //滚动栏距离到100,100

scrollBy 传入移动的距离在原本基础上移动对应的距离
```
//50,50
window.scrollBy(100,100) //滚动栏距离到150,150
```

print 打印方法

window.print()

获取焦点和失去焦点的方法

window.focus() //获取焦点
window.blur() //失去焦点

定时器和延时器

window.setInterval(function(){},1000,'传递的参数')
window.clearInterval('定时器id')
window.setTimeout(function(){},1000,'传递的参数')
window.clearTimeout('延时器id')

延时器

window.setImmediate //等待其他执行完再执行

location

location表示是地址栏对象，主要作用是设置地址栏内容及获取地址栏内容。

属性（所有属性都是可读可写）

hash #号后面的值
host 主机
hostname 主机名
href: 地址路径
origin 跨域地址
pathname 路径名
port 端口号
protocol 协议
search ?后面携带的参数

console.log(location)
// #号后的值 #一般都存在于最后面
console.log(location.hash)
//域名 相当于ip地址+端口号 localhost表示本机它的IP为127.0.0.1
console.log(location.host)
//ip地址
console.log(location.hostname)
//地址的链接
console.log(location.href)
//跨域地址 
console.log(location.origin)
//路径地址  去除对应的ip地址+端口号的剩余内容
console.log(location.pathname)
//端口号 1-65525 （1-100的端口一般被系统占用） http协议默认端口为80  https的默认端口为443
console.log(location.port)
//超文本传输协议 网络请求访问常用  http 不安全  https 安全
console.log(location.protocol)
//?后面的值 ?用于传递参数的 ?key=值&key=值
console.log(location.search)
//location是可以设置的
location.hash = "hello"
location.search = 'name=tom'
// location.port = 9999
location.proctocol = "https" //没作用
location.hostname = "127.0.0.1"
//href location的链接地址 设置href可以使页面跳转 没有历史记录
// location.href = "http://www.baidu.com"
location = "http://www.baidu.com" //跟href属性是一致的

方法

reload 重新加载
assign 跳转页面
replace 替换href地址跳转页面

//重新加载
location.reload() 
// 历史原因 可以会传入对应的boolean类型的值 true表示重新加载  false表示从缓存中加载
location.reload(true) 
// assign 跳转页面的 有历史记录的
location.assign('http://www.baidu.com')
// 替换当前href地址 没有历史记录
location.replace('http://www.baidu.com')

history

history是历史对象，主要是用于操作对应的历史页面的。

属性（只读）

state 状态值
length 历史页面个数
scrollRestoration 滚动恢复属性

console.log(history.state) //状态值 默认为null
console.log(history.length) //历史页面个数
console.log(history.scrollRestoration)//滚动栏位置缓存选项 滚动恢复属性

方法（不会进行刷新操作）

pushState 将历史页面推入（设置state的值）

replaceState 将历史页面替换（设置state的值）

/* pushState replaceSate 三个参数  设置给state的数据 打开的页面名字（""）  链接地址
  pushState 推入一个历史页面 这个页面地址会替换当前的页面地址 但是不会进行页面刷新操作 state的值会发生变化 历史页面个数+1
  replaceState 替换当前的历史页面 这个页面地址会替换当前的页面地址 也不会进行刷新操作 state的值会发生变化 历史页面个数不会变化
*/
//相关方法
function fn(){
    history.pushState('hello','','./state.html')
    console.log(history.length) //2
    console.log(history.state) //hello
}
function fn1(){
    history.replaceState('hi','','./state.html')
    console.log(history.length) //1
    console.log(history.state) //hi
}

forward 前进
back 后退

go 历史页面跳转

<!-- 前进后退和跳转 -->
<button onclick="history.forward()">前进</button>
<button onclick="history.back()">后退</button>
<!-- go方法里面传入的是对应的数值 0为当前页面 大于为0为前进 小于0为后退 -->
<button onclick="history.go(-1)">跳转</button>

navigator

浏览器的导航对象，主要是描述当前浏览器的信息及相关内容。

screen

浏览器的屏幕对象，主要是用于获取当前的屏幕大小。（大屏可视化）

属性

width 宽度
height 高度
availHeight 可占用高度
availWidth 可占用宽度

//宽度和高度
console.log(screen.width);
console.log(screen.height);
//可占用宽度和高度
console.log(screen.availHeight);
console.log(screen.availWidth);

document

表示当前的文档对象，也就是书写的html文档。

frames

表示子窗口，实际也是一个window对象

总结

bom是利用共有对象来实现对应的兼容。主要的对象有window，history , screen , navigator, document、frames、location。
history主要是用于操作历史页面的，里面的方法都不会进行刷新操作。（back、forward、go 、pushState 、replaceState）
location 主要是用于操作对应的地址栏里面的属性都可以进行设置（hash、query）。主要的方法有（reload、assign、replace）。
screen主要是屏幕对象，它可以获取屏幕相关内容。
navigator是导航对象，主要可以获取浏览器的相关内容及外设。
bom基础是路由的底层实现（主要用到了location 及 history）

跳转页面的几种方式

a标签跳转页面
location赋值
location.href赋值
location.assign()
location.replace()
history.go()
history.back()
history.forward()

什么是BOM，以及BOM的相关方法

BOM

概述