【JavaScript】BOM

window 对象

BOM（Browser Object Model，浏览器对象模型）提供与浏览器相关的 API。

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JS 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义的 parseInt() 等全局方法。

因为 window 对象的属性在全局作用域中有效，所以很多浏览器 API 及相关构造函数都以 window 对象属性的形式暴露出来。另外，由于实现不同，某些 window 对象的属性在不同浏览器间可能差异很大。

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

// 这会导致抛出错误, 因为 oldValue 没有声明
var newValue = oldValue;

// 这不会抛出错误, 因为这里是属性查询. newValue 会被设置为 undefined
var newValue = window.oldValue;

记住，JS 中有很多对象都暴露在全局作用域中，比如 location 和 navigator，因而它们也是 window 对象的属性。

窗口关系

• top 对象始终指向最上层（最外层）窗口，即浏览器窗口本身。

• parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口，则 parent 等于 top（都等于 window）。

• self 对象，它是终极 window 属性，始终会指向 window。实际上，self 和 window 就是同一个对象。之所以还要暴露 self，就是为了和 top、parent 保持一致。

这些属性都是 window 对象的属性，因此访问 window.parent、window.top 和 window.self 都可以。这意味着可以把访问多个窗口的 window 对象串联起来，比如 window.parent.parent。

最上层的 window 如果不是通过 window.open() 打开的，那么其 name 属性就不会包含值。

调整窗口

可以使用 moveTo() 和 moveBy() 方法移动窗口。这两个方法都接收两个参数。

• moveTo() 接收要移动到的新位置的绝对坐标 x 和 y

• moveBy() 则接收相对当前位置在两个方向上移动的像素数

// 把窗口移动到左上角
window.moveTo(0, 0);

// 把窗口向下移动 100 像素
window.moveBy(0, 100);

// 把窗口移动到坐标位置 (200, 300)
window.moveTo(200, 300);

// 把窗口向左移动 50 像素
window.moveBy(-50, 0);

依浏览器而定，以上方法可能会被部分或全部禁用。

可以使用 resizeTo() 和 resizeBy() 方法调整窗口大小。这两个方法都接收两个参数。

• resizeTo() 接收新的宽度和高度值

• resizeBy() 接收宽度和高度各要缩放多少

// 缩放到 100 × 100
window.resizeTo(100, 100);

// 缩放到 200 × 150
window.resizeBy(100, 50);

// 缩放到 300 × 300
window.resizeTo(300, 300);

与移动窗口的方法一样，缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。同样，缩放窗口的方法只能应用到最上层的 window 对象。

像素比

CSS 像素是 Web 开发中使用的统一像素单位，这样是为了在不同设备上统一标准。

比如，低分辨率平板设备上 12 像素（CSS 像素）的文字应该与高清 4K 屏幕下 12 像素（CSS 像素）的文字具有相同大小。这就带来了一个问题，不同像素密度的屏幕下就会有不同的缩放系数，以便把物理像素（屏幕实际的分辨率）转换为 CSS 像素（浏览器报告的虚拟分辨率）。

举个例子，手机屏幕的物理分辨率可能是 1920 × 1080，但因为其像素可能非常小，所以浏览器就需要将其分辨率降为较低的逻辑分辨率，比如 640 × 320。这个物理像素与 CSS 像素之间的转换比率由 window.devicePixelRatio 属性提供。对于分辨率从 1920 × 1080 转换为 640 × 320 的设备，window.devicePixelRatio 的值就是 3。这样一来，12 像素（CSS 像素）的文字实际上就会用 36 像素的物理像素来显示。

安全限制

弹出窗口有段时间被在线广告用滥了。很多在线广告会把弹出窗口伪装成系统对话框，诱导用户点击。因为长得像系统对话框，所以用户很难分清这些弹窗的来源。为了让用户能够区分清楚，浏览器开始对弹窗施加限制。

此外，浏览器会在用户操作下才允许创建弹窗。在网页加载过程中调用 window.open() 没有效果，而且还可能导致向用户显示错误。弹窗通常可能在鼠标点击或按下键盘中某个键的情况下才能打开。

注意：IE 对打开本地网页的窗口再弹窗解除了某些限制。同样的代码如果来自服务器，则会施加弹窗限制。

弹窗屏蔽程序

所有现代浏览器都内置了屏蔽弹窗的程序，因此大多数意料之外的弹窗都会被屏蔽。在浏览器屏蔽弹窗时，可能会发生一些事。如果浏览器内置的弹窗屏蔽程序阻止了弹窗，那么 window.open() 很可能会返回 null。此时，只要检查这个方法的返回值就可以知道弹窗是否被屏蔽了，比如：

let demoWin = window.open('http://www.wrox.com', '_blank');
if (demoWin == null) {
    alert('The popup was blocked! ');
}

在浏览器扩展或其他程序屏蔽弹窗时，window.open() 通常会抛出错误。因此要准确检测弹窗是否被屏蔽，除了检测 window.open() 的返回值，还要把它用 try/catch 包装起来，像这样：

let blocked = false;
try {
    let demoWin = window.open('http://www.wrox.com', '_blank');
    if (demoWin == null) {
        blocked = true;
    }
} catch (ex) {
    blocked = true;
}
if (blocked) {
    alert('The popup was blocked!');
}

无论弹窗是用什么方法屏蔽的，以上代码都可以准确判断调用 window.open() 的弹窗是否被屏蔽了。

弹窗

1. alert()：弹出窗口，无返回值

2. confirm()：弹出窗口，窗口有两个选择按钮，返回布尔值

3. prompt()：在 confirm 的基础上，增加了输入框，返回输入的内容

上述 API 可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

很多浏览器针对这些系统对话框添加了特殊功能。如果网页中的脚本生成了两个或更多系统对话框，则除第一个之外所有后续的对话框上都会显示一个复选框，如果用户选中则会禁用后续的弹框，直到页面刷新。

如果用户选中了复选框并关闭了对话框，在页面刷新之前，所有系统对话框（警告框、确认框、提示框）都会被屏蔽。开发者无法获悉这些对话框是否显示了。对话框计数器会在浏览器空闲时重置，因此如果两次独立的用户操作分别产生了两个警告框，则两个警告框上都不会显示屏蔽复选框。如果一次独立的用户操作连续产生了两个警告框，则第二个警告框会显示复选框。

JS 还可以显示另外两种对话框：find() 和 print()。这两种对话框都是异步显示的，即控制权会立即返回给脚本。用户在浏览器菜单上选择 “查找”（find）和 “打印”（print）时显示的就是这两种对话框。通过在 window 对象上调用 find() 和 print() 可以显示它们，比如：

// 显示打印对话框
window.print();
// 显示查找对话框
window.find();

这两个方法不会返回任何有关用户在对话框中执行了什么操作的信息，因此很难加以利用。此外，因为这两种对话框是异步的，所以浏览器的对话框计数器不会涉及它们，而且用户选择禁用对话框对它们也没有影响。

打开/关闭页面

open(url, target, windowFeatures)：用指定的名称将指定的资源加载到新的或已存在的浏览上下文（标签 / 窗口 / iframe）中。

1. url（可选）：一个字符串，表示要加载的资源的 URL 或路径。如果指定空字符串或省略此参数，则会在浏览上下文中打开一个空白页。

2. target（可选）：一个不含空格的字符串，用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称；此外，还可以使用特殊的 target 关键字：

   1. _self：当前页面加载

   2. _blank：在新标签页打开

   3. _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同

   4. _top：最顶级的浏览上下文。如果没有祖先，行为与 _self 相同

3. windowFeatures（可选）：一个字符串，包含以逗号分隔的窗口特性列表，形式为 name=value，布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。详情参考 Web API：window.open 方法。

   1. fullscreen："yes" / "no"；是否最大化新窗口。
   2. location："yes" / "no"；是否显示地址栏。
   3. menubar："yes" / "no"；是否显示菜单栏。
   4. resizable："yes" / "no"；能否调整新窗口的尺寸。
   5. scrollbars："yes" / "no"；内容过长时是否显示滚动条。
   6. status："yes" / "no"；是否显示状态栏。
   7. toolbar："yes" / "no"；是否显示工具栏。
   8. left：数值；新窗口的 x 轴坐标。不能为负值。
   9. top：数值；新窗口的 y 轴坐标。不能为负值。
   10. height：数值；新窗口的高度。不能小于 100。
   11. width：数值；新窗口的宽度。不能小于 100。

window.open(
    'http://www.wrox.com/',
    'demoWindow',
    'height=400, width=400, top=10, left=10, resizable=yes',
);

这行代码会打开一个可缩放的新窗口，大小为 400 × 400，位于离屏幕左边及顶边各 10 像素的位置。

window.open() 方法返回一个对新建窗口的引用。这个对象与普通 window 对象没有区别，只是为控制新窗口提供了方便。例如，某些浏览器默认不允许缩放或移动主窗口，但可能允许缩放或移动通过 window.open() 创建的窗口。跟使用任何 window 对象一样，可以使用这个对象操纵新打开的窗口。

const demoWin = window.open(
    'http://www.wrox.com/',
    'demoWindow',
    'height=400, width=400, top=10, left=10, resizable=yes',
);

// 缩放
demoWin.resizeTo(500, 500);

// 移动
demoWin.moveTo(100, 100);

close()：用于关闭当前窗口或某个指定的窗口。

该方法只能由 window.open 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JS 控制台会出现类似下面的错误：“不能使用脚本关闭一个不是由脚本打开的窗口” 或 “Scripts may not close windows that were not opened by script”。

demo - 关闭使用 window.open 打开的窗口：

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;

function openWindow() {
    openedWindow = window.open('more-info.html');
}

function closeOpenedWindow() {
    openedWindow.close();
}

虽然不可能不经用户确认就关闭主窗口，但弹出窗口可以调用 top.close() 来关闭自己。关闭窗口以后，窗口的引用虽然还在，但只能用于检查其 closed 属性了：

console.log(demoWin.closed); // true

新创建窗口的 window 对象有一个属性 opener，指向打开它的窗口。这个属性只在弹出窗口的最上层 window 对象（top）有定义，是指向调用 window.open() 打开它的窗口或窗格的指针。例如：

const demoWin = window.open(
    'http://www.wrox.com/',
    'demoWindow',
    'height=400, width=400, top=10, left=10, resizable=yes',
);
console.log(demoWin.opener === window); // true

把 opener 设置为 null 表示新打开的标签页不需要与打开它的标签页通信，因此可以在独立进程中运行。这个连接一旦切断，就无法恢复了。

使用 window.open 和 location.href 实现页面跳转的区别如下：

• window.open 是一个方法，它可以打开一个新的浏览器窗口或标签页，也可以在当前窗口或标签页打开一个网址。它的语法是 window.open(url, name, features)，其中 url 是要打开的网址，name 是新窗口或标签页的名称，features 是一些可选的参数，用来指定新窗口或标签页的特征，如大小、位置、工具栏等。例如，window.open('https://www.bing.com', '_blank') 会在一个新的标签页打开 Bing 搜索引擎。
• location.href 是一个属性，它表示当前浏览器窗口或标签页的 URL 地址。通过给它赋值一个新的网址，可以在当前窗口或标签页打开该网址。例如，location.href = 'https://www.bing.com' 会在当前窗口或标签页打开 Bing 搜索引擎。
• 两者的主要区别是：
  1. window.open 可以控制打开网址的方式，是在新窗口或标签页还是在当前窗口或标签页，而 location.href 只能在当前窗口或标签页打开网址。
  2. window.open 可以控制打开网址的特征，如大小、位置、工具栏等，而 location.href 不能控制这些特征。
  3. window.open 可以返回一个对新打开窗口或标签页的引用，从而可以对其进行操作，如关闭、移动、改变内容等，而 location.href 不能返回这样的引用。
  4. window.open 可能会被浏览器的弹出窗口拦截器拦截，从而导致打开失败，而 location.href 不会被拦截。

一般来说，你可以根据以下几个方面来选择使用 window.open 还是 location.href：

• 用户体验：如果你想让用户在跳转后还能回到原来的页面，或者不想打断用户当前的操作，那么你可以使用 window.open 在新窗口或标签页打开网址，这样用户可以自由切换或关闭新窗口或标签页。如果你想让用户完全转移到新的网址，或者不需要保留原来的页面，那么你可以使用 location.href 在当前窗口或标签页打开网址，这样用户可以使用浏览器的后退按钮返回上一个网址。
• 功能需求：如果你想控制打开网址的特征，如大小、位置、工具栏等，或者想对新打开的窗口或标签页进行操作，如关闭、移动、改变内容等，那么你可以使用 window.open，并保存它返回的引用。如果你只是简单地打开一个网址，而不需要对其进行任何操作，那么你可以使用 location.href。
• 安全性：如果你想避免被浏览器的弹出窗口拦截器拦截，或者想避免被恶意网站利用 window.open 修改原来的页面内容，那么你可以使用 location.href。如果你对打开网址的来源和内容有信任，并且想提供给用户更多的选择和控制，那么你可以使用 window.open。

location

location 提供与地址栏相关的 API。

location 既是 window 的属性，也是 document 的属性，引用的是同一个对象

假设浏览器当前加载的 URL 是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents，location 对象的内容如下表所示：

1. location.href：http://www.wrox.com:80/WileyCDA/?q=javascript#contents
2. location.origin：http://www.wrox.com
3. location.host：www.wrox.com:80
4. location.hostname：www.wrox.com
5. location.port：80
6. location.hash：#contents
7. location.pathname：/WileyCDA/
8. location.protocol：http:
9. location.search：?q=javascript
10. location.username：foouser
11. location.password：barpassword

常用方法：

1. location.reload()：刷新当前页面
2. location.assign(url)：跳转到指定的 url，产生新的会话历史
3. location.replace(url)：跳转到指定的 url，替换当前资源 不会产生新的会话历史

url 可以为绝对路径 / 相对路径；为相对路径时，会替换掉当前路径的 location.origin 后面的数据。

协议 protocol

主要是 http & https，https 更安全。

一般只有上线项目才会使用 https，因为 https 的配置比较麻烦，而且需要收费。

如果在浏览器的地址栏省略了协议，浏览器会自动补全。

要使用什么协议访问你的项目，取决于你的项目支持什么协议，可支持 http / https / http & https。

主机 hostname

它表示客户端希望在哪台计算机上寻找资源。

有 2 种写法：IP 地址 & 域名

1. IP 地址：是一个网络中计算机的唯一编号，通常 一个 IP 对应一台计算机。
   记住特殊的 IP 地址：127.0.0.1，它表示本机 IP。
2. 域名：IP 地址的别名，把不容易记忆的数字变为容易记忆的单词。当使用域名访问时，会自动转换为 IP 地址。
   记住特殊的域名：localhost，它表示的 IP 地址为 127.0.0.1。

注意：IP 地址只能搭配 http 使用，而域名可以搭配 http / https。

端口 port

它表示客户端希望在哪个应用程序寻找资源。

每个服务器程序，都会监听一个或多个端口，只有找到这个端口，才能找到这个服务器程序。

http 的默认端口号是 80；https 的默认端口号是 443。

路径 pathname

服务器上往往有许多的资源，每个资源都有自己访问的路径。

路径是可选的，若不填写，则路径为 /。

参数 search

用于传递一些额外信息

哈希 hash

navigator

用于请求运行当前代码的应用程序的相关信息。

userActivation

navigator.userActivation 返回一个 UserActivation 对象，该对象包含了当前窗口的用户激活状态的信息。

UserActivation 对象有 2 个属性：

1. hasBeenActive 查看用户是否曾经与页面交互过，这个属性在页面加载时为 false，当用户首次与页面交互时变为 true，并且不会再变回 false。
2. isActive 查看用户是否当前正在与页面交互，这个属性在用户开始交互时变为 true，并且在一段时间后（通常是 5 秒）变回 false。

userAgentData

navigator.userAgentData 返回一个 NavigatorUAData 对象。

NavigatorUAData 对象有以下属性：

1. brands：一个数组，包含了浏览器的品牌和版本信息。
2. mobile：一个布尔值，表示是否是移动设备。
3. platform：一个字符串，表示操作系统的名称。

language

navigator.language 返回一个字符串，表示浏览器的首选语言。

有以下常见值："en"-英语、"en-US"-美式英语、"zh-CN"-简体中文、"zh-TW"-繁体中文…

clipboard

navigator.clipboard 返回一个 Clipboard 对象，可以用来读写剪切板的内容。

Clipboard 对象有以下方法：

1. readText()：返回一个 Promise，解析为剪切板中的文本字符串
2. writeText(text)：text 是要写入剪切板的文本，返回一个 Promise，解析为写入完成的信号
3. read()：返回一个 Promise，解析为一个包含剪切板内容的 ClipboardItem 对象数组。每个 ClipboardItem 对象都有一个类型（如 image/png）和一个 Blob 对象，表示剪切板中的数据。可以用这个方法来读取剪切板中的图片或其他富文本内容。
4. write(data)：data 是一个 ClipboardItem 对象数组，表示要写入剪切板的数据。返回一个 Promise，解析为写入完成的信号。你可以用这个方法来向剪切板中写入图片或其他富文本内容。

sendBeacon

navigator.sendBeacon 方法可以异步地向 Web 服务器发送一个 HTTP POST 请求，携带一些小数据。主要用于发送统计数据。

优点：

1. 数据发送可靠，不会因为页面卸载而丢失
2. 数据异步传输，不会阻塞页面卸载或下一页面的加载
3. 数据可以是任意类型，如 ArrayBuffer、Blob、FormData…

语法：navigator.sendBeacon(url, data)

1. url 为接收数据的网络地址
2. data 为要发送的数据

返回一个布尔值，表示数据是否成功加入传输队列。如果成功进入浏览器的发送队列后，会返回 true；如果受到队列总数、数据大小的限制后，会返回 false。返回 true 后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功，不会再有任何返回值。