BOM

浏览器对象模型 – Browser Object Model
Web 浏览器 裸露的所有对象组成的示意模型，当浏览器剖析文档时，它将创立一个 对象汇合，定义文档并具体阐明它如何显示。

浏览器创立的对象称为 文档对象 ，它是浏览器应用的更大的对象汇合的一部分，此浏览器 对象汇合 统称为浏览器对象模型或 BOM

1. window
2. location
3. navigator
4. screen
5. history

1 window 对象

顶层对象 – 外围 ，其余对象都是该对象的子对象
双重身份

• 被复用为 ECMAScript 中的 Global 对象
• 浏览器窗口的 JavaScript 接口

1. Global
2. 窗口
3. 定时器
4. 零碎对话框

1.1 Global 作用域

通过 var 申明的所有全局变量和函数都会成为 window 对象的属性和办法

var a = 10;
var showA = () => { console.log(this.a); }
console.log(window.a); //10
window.showA() //10

let b = 20;
let showB = () => { console.log(b); }
console.log(window.b); //undefined
window.showB() //Uncaught TypeError

1.2 窗口

1. 窗口关系
2. 窗口地位和像素比
3. 窗口大小
4. 视口地位
5. 导航与新窗口

1.2.1 窗口关系

• top：顶层窗口，指向最外层窗口的 window
• parent：父窗口 window

• self：以后窗口，以后 window

  // 单窗口
  window === top //true
  window === parent //true
  window === self //true

  1.2.2 窗口地位和像素比

• screenLeft：窗口绝对于屏幕 左侧 的地位
• screenTop：绝对于 顶部 的地位
• moveTo(x,y)：挪动至 相对 坐标

• moveBy(x,y)：绝对 以后地位的偏移

  // 半屏
  console.log(screenLeft);//953
  console.log(screenTop); //30

  有与 moveTo()与 moveBy()仅在 IE 上有成果，不再举例

• devicePixelRatio：物理像素和逻辑像素的缩放系数

1.2.3 窗口大小

• innerWidth：窗口内页面 视口宽度

• innerHeight：窗口内页面 视口高度

  document.documentElement.clientWidth/clientHeight 也示意视口大小

• outerWidth：窗口宽度

• outerHeight：窗口高度

  console.log(innerHeight);//364
  console.log(outerHeight);//1057

• resizeTo(x,y)：设置窗口相对大小

• resizeBy(x,y)：绝对原尺寸进行办法与放大

  同样仅在 IE 上有成果，其余浏览器反对，但可能处于保护模式

1.2.4 视口大小

下面介绍了两种获取可视区宽高的形式
当页面宽高较大，可视区产生 滚动 时，获取以后可视区的 地位

• pageXOffset/scrollX：可视区绝对页面程度滚动的间隔 – 前者已 弃用

• pageYOffet/scrollY：垂直滚动的间隔 – 前者已 弃用

  console.log(pageXOffset);//200
  console.log(scrollX);//200
  console.log(pageYOffset === scrollY);//true

• scroll(x,y)：滚动至 相对 坐标
• scrollTo(x,y)：滚动至 相对 坐标

• scrollBy(x,y)：绝对 以后地位的偏移量

  参数能够是一个选项 对象，对滚动行为进行具体形容

  // 平滑滚动到顶部
  scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
  })
  // 向下滚动一页
  scrollBy({
    left: 0,
    top: innerHeight,
    behavior: 'smooth'
  })

  behavior：

• smooth：平滑滚动
• instant：霎时滚动
• auto：instant

1.2.5 导航与新窗口

• open(url,name,fetures)：用指定名称将指定的资源加载到浏览器上下文，无名称关上新窗口

• name

  • 关上指定名称的窗口
  • ‘_self’,’_blank’
  • ‘_parent’ 在 parent 框架关上，无则等价于 ’_self’
  • ‘_top’ 进入顶层浏览上下文，无则等价于 ’_self’

• fetures

  • height,width,top,left：新窗口的大小与地位
  • fullscreen：是否窗口最大化 IE
  • location：是否显示地址栏
  • Menubar：是否显示菜单栏
  • toolbar：是否显示工具栏
  • status：是否显示状态栏
  • resizable：是否能够拖动扭转新窗口大小
  • scrollbars：是否在内容过长时滚动

  布尔类型默认为no
  open 返回以后窗口的 window，opener 返回关上该窗口的 window

• close()：敞开窗口

  // 在新窗口指导大小与地位关上资源
  const newWin = open(
    'http://www.bilibili.com',
    '_blank',
    'height=400,width=400,top=0,left=0,resizable=yes'
  )
  // 敞开窗口
  newWin.close()
  newWin.closed //true

  加载阶段 的 open()会被浏览器 拦挡，只容许用户手动增加窗口

1.2 定时器

setTimeout(func,delay,arg1…)：在指定工夫后执行
参数：arg 为 func 回调的默认参数
返回值，返回定时器 ID

//2000ms 后执行
let timer = setTimeout((...a) => {console.log(a);
}, 2000, 'a', 'b');
// 敞开定时器
clearTimeout(timer)

setInterval(func,delay,arg1…)：每隔一段时间执行一次
参数与返回值与 setTimeout 雷同，通过 clearInterval 勾销

间隔时间：每隔一段时间增加一个工作到执行队列中，浏览器不论何时开始要执行多久，在下一个工夫距离会再增加一个工作到执行队列，不论后面的工作是否执行
这意味着可能会呈现定时器增加了多个工作，最终同时执行没有距离的成果

1.3 零碎对话框

• alert()：正告窗
• confirm()：确认窗 – 返回布尔值
• prompt()：提醒对话框 – 返回字符串或 null
• find()：查找页面内容 – 返回布尔值
• print()：显示打印对话框

个别状况下咱们会本人写对话框，在款式与性能上更欠缺

2 location 对象

window 与 document私有 属性：提供以后窗口中加载文档的信息，以及通常的导航性能

window.location === document.location //true

• href：残缺 URL
• origin：URL 源地址。只读
• protocol：协定名
• host：服务器名 + 端口号
• hostnamr：服务器名
• port：端口号
• pathname：门路或文件名
• hash：散列值，#后的值
• search：query 参数
• username：域名前指定的用户名
• password：域名前指定的明码

2.1 查问字符串

location.search()返回 query 参数，须要对其拆分保留

// 应用字符串拆分与遍历的形式
function getQueryStringArgs() {let qs = location.search.length > 0 ? location.search.slice(1) : '';
    const args = {};
    for (const item of qs.split('&').map(i => i.split('='))) {let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}

decodeURIComponet 函数为解码函数，将编码的 URI 的转义序列转换为原字符

function getQueryStringArgs() {let qs = new URLSearchParams(location.search)
    const args = {};
    for (const item of qs) {let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}
console.log(getQueryStringArgs());

new URLSearchParams(query) 返回一个可迭代对象，以数据模式寄存 key-val
实例对象能够应用 get() set() delete()办法，相当于解决后返回一个 map 构造

2.2 location 上的办法

• assign(url)：批改浏览器地址，location 的其余地址属性会从新解析

• replace(url)：替换浏览器地址

  replace 与 assign 不同的是，replace 后原页面不会保留到会话历史中，相当于间接 替换

• reload()：从新加载页面

3 navigator 对象

用户代理的状态和标识，容许脚本查问它和注册本人进行一些流动
属性

• connection：设施网络连接信息。只读
• onLine：是否联网
• deviceMemory：设施内存
• hardwareConcurrency：逻辑处理器外围数，浏览器可并行最大工作线程数量
• maxTouchPoints：最大关联触点数量
• language[s]：浏览器主语言与偏好语言数组
• mediaDevices：可用媒体设施
• plugins：插件数组
• userAgent：用户代理字符串
• webdriver：浏览器是否被主动程序控制
• storage：裸露相干 API
• serviceWorker：裸露相干 API
• permissions：裸露相干 API
• mediaCapabilities：裸露相干 API
• locks：裸露相干 API
• credentials：裸露相干 API
• geolocation：裸露相干 API – 以后设施地理位置

办法

• registerProtocolHandler(scheme, url)

  web 站点为本身注册 协定

• requestMediaKeySystemAccess(keySystem,supportedConfigurations)

  返回一个 promise，拜访特定媒体的密钥零碎，该零碎又可创立解密媒体流的密钥

• sendBeacon(url, data)

  向指定地址异步发送数据，只是简略字符串则向本地址与字符串拼接后的地址发送数据，胜利返回 true

• share(data) data:url text title files

  返回 promise，返回以后平台的共享机制，数据格式不正确 promise 为回绝状态

• vibrate(pattern)

  触发设施触动，不反对返回 false
  pattern 为单个触动或触动数组

4 screen 对象

浏览器窗口里面的客户端显示器的信息

• width：屏幕宽度
• height：高度
• availHeight：屏幕高度 – 零碎组件高度
• availWidth：屏幕宽度 – 零碎组件宽度
• availLeft：无零碎组件占用的屏幕最左侧像素
• availTop：最顶部
• colorDepth：屏幕色彩的位数
• pixelDepth：屏幕位深
• orientation：屏幕朝向

5 history 对象

导航历史记录

5.1 根本属性与办法

• length：历史记录数量
• back()：回退一步
• forward()：前进一步
• go(n)：后退 / 后退 |n| 步，或指定地址，导航至最近的该地址

5.2 历史状态治理

• pushState(state,title,url)：向历史中增加一个状态
• replaceState(state,title,url)：替换以后历史记录

当 pushState()时会触发 popstate 事件，它的事件对象的 state 属性蕴含 pushState 的第一个 state 参数

pushState()创立的 ” 假 ”URL 背地都对应这服务器上一个实在的物理 URL，否则单击刷新会导致 404 谬误
所有单页应用程序框架都必须通过服务器或客户端的某些配置解决这个问题