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); //10window.showA() //10let b = 20;let showB = () => { console.log(b); }console.log(window.b); //undefinedwindow.showB() //Uncaught TypeError

1.2 窗口

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

1.2.1 窗口关系

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

  • self：以后窗口，以后window

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

    1.2.2 窗口地位和像素比

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

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

    //半屏console.log(screenLeft);//953console.log(screenTop); //30
    有与moveTo()与moveBy()仅在IE上有成果，不再举例
  • devicePixelRatio：物理像素和逻辑像素的缩放系数

1.2.3 窗口大小

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

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

    document.documentElement.clientWidth/clientHeight也示意视口大小
  • outerWidth：窗口宽度

  • outerHeight：窗口高度

    console.log(innerHeight);//364console.log(outerHeight);//1057
  • resizeTo(x,y)：设置窗口相对大小

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

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

1.2.4 视口大小

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

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

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

    console.log(pageXOffset);//200console.log(scrollX);//200console.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谬误
所有单页应用程序框架都必须通过服务器或客户端的某些配置解决这个问题