【Javascript 详细笔记】BOM

BOM

浏览器对象模型（BOM，Browser Object Model）

BOM的核心是window对象，表示浏览器的实例。

window对象在浏览器中有两重身份：

1. ECMAScript中的Global对象
2. 浏览器窗口的JavaScript接口

意味着网页中定义的所有对象、变量和函数都以window作为其Global对象，都可以访问其上定义的parseInt等全局方法。

一、window对象

1、Global作用域

1. 在全局作用域中使用var声明的变量跟函数表达式都被映射到了window下面。
   而使用let跟const在全局作用域中声明变量跟函数表达式，不会映射到window下，访问时会抛出错误

2. 访问未声明的变量会抛出错误，但是可以在window对象上查询是否存在可能未声明的变量

2、窗口位置与像素比

浏览器提供了表示窗口相对于屏幕左侧和顶部的位置：

• screenLeft
• screenTop

移动窗口方法：

• window.moveTo(x, y)：接收要移动到的新位置的绝对坐标
• window.moveBy(x, y)：接收相对当前位置在两个方向上移动的像素数

3、窗口的大小

浏览器提供4个属性：

1. 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）

• innerWidth
• innerHeight

  与他相关的：clientWidth、clientHeight（返回页面视口的宽高）document.documentElement.clientWidth

2. 返回浏览器自身的大小：

• outerWidth
• outerHeight

检测页面是否处于标准模式：document.compatMode === 'CSS1Compat'

调整窗口大小：

• window.resizeTo()
• window.resizeBy()

4、视口位置

度量文档相对与视口滚动距离的属性：

• window.pageXoffset/window.scrollX
• window.pageYoffset/window.scrollY

可以使用如下方法滚动页面：

• window.scrollBy(0, 200) // 向下滚动200
• window.scrollTo(0, 0) // 滚动到页面左上角
• window.scroll()

这三个方法还可以接收一个滚动字典：（可以设置浏览器是否平滑滚动）

window.scrollBy({
  left: 0,
  top: 1400,
  behavior: 'smooth' // 平滑滚动
})

5、导航与打开新窗口

window.open()方法用于导航到指定的URL

接收四个参数：

1. 要加载的URL
2. 目标窗口
3. 特性字符串（height、left···是以逗号分隔的形式出现）
4. 表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值（只有在不打开新窗口时才会使用）

window.open()方法返回一个新窗口的引用。

let wroxWin = window.open('http://www.baidu.com', 'wroxWindow', 'height=300, width=400, top=10, resizable=yes');

wroxWin.resizeTo(500, 500) // 缩放
wroxWin.moveTo(100, 100) // 移动

可以使用close()方法关闭创建出来的窗口：
wroxWin.closed()

新创建窗口的window对象有一个属性opener，指向打开他的窗口，指向调用window.open()打开它的窗口或窗格的指针。

窗口不会跟踪记录自己打开的新窗口（虽然新窗口有指向打开它的窗口的指针，但反之则不然）

每个标签页会运行在独立的进程中，如果一个标签页打开了另一个，而window对象需要跟另一个标签页通信，那么便签不能运行在独立的进程中。

可以将新打开的标签页的opener属性设置为null，表示新打开的标签页可以运行在独立的进程中

6、定时器

• window.setTimeout()：定时执行
• window.setInterval()：每隔一段时间执行（生产环境最好不使用）

7、系统对话框

• alert()
• confirm()
• prompt()

异步显示的对话框：

• find() // 显示打印对话框
• print() // 显示查找对话框

二、location对象

提供了当前窗口中加载文档的信息，以及通常的导航功能

它既是window的属性也是document的属性，即window.location和document.location指向同一个对象

查询字符串

location.search()：返回了从问号开始直到URL末尾的所有内容

操作地址

location.assign()

下面两行代码都会执行与显示调用assign一样的效果

• window.location
• location.href

3种修改浏览器地址的方法，只有location.href是最常见的

上述方法修改URL后，浏览器历史记录会增加相应的记录，如果不想增加历史记录，那么可以使用replace()方法

最后一个修改地址的方法reload(),重新加载当前页面。

• location.reload() // 重新加载，可能是从缓存中加载
• location.reload(true) // 重新加载，从服务器加载

三、navigator对象

系统能力对象

1、检测插件

plugins数组来确定

• name：插件名称
• description：介绍
• filename：插件的文件名
• length：由当前插件处理的MIME类型数量

2、注册处理程序

registerProtocolHandle()方法，可以把一个网站注册为处理某种特定类型信息应用程序

3个参数：

• 处理的协议
• 处理协议的URL
• 应用名称

四、screen

五、history对象