关于程序员:快速了解JavaScript的BOM模型

ECMAScript 是 JavaScript 的外围，而BOM（浏览器对象模型，Browser Object Model）是在 Web 中应用 JavaScript 的外围。

在 BOM 对象中，window对象是最顶层对象，在浏览器环境中它是一个 Global 全局对象，其它对象是 window 对象的子对象（属性）。BOM次要用于治理浏览器窗口及窗口之间的通信。上面是 BOM 对象的组成构造。

window是 BOM 的外围对象，示意浏览器的一个实例。有双重角色，即是通过 JavaScript 拜访浏览器窗口的一个接口，又是 ES 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象。

var age = 29;
function sayAge() {console.log(this.age);
}
console.log(window.age);    // 29
sayAge();                    // 29
window.sayAge();            // 29

如上所示，在全局作用域中定义的变量和函数都被主动归在了 window 对象名下。而 sayAge() 存在于全局作用域中，办法中的 this.age 被映射到window.age，因而显示的依然是正确的后果。

然而，定义的全局变量不能通过 delete 操作符删除，定义在 window 对象上的属性却能够。

window除了 location、navigator、screen、history 和document外，还有一些属性。

window.console：返回 Console 对象的援用，能够向浏览器控制台输入日志信息。仅用于调试，不应该给用户出现。（只读）
window.frames：数组对象，列出以后窗口的所有间接子窗口。（只读）
window.frameElement：以后窗口嵌入另一个窗口（嵌入<object>、<iframe>），如果以后窗口是顶层，返回null。（只读）
window.innerHeight：窗口的视图可见高度（单位：像素），也包含滚动条高度。（只读）
window.innerWidth：窗口的视图可见宽度（单位：像素），也包含滚动条的宽度。（只读）
window.length：以后窗口中蕴含框架数量。框架为 <frame> 与<iframe>。（只读）
window.locationbar：查看 visibility 属性的地址栏对象，用来示意是否可见。（只读）
window.localStorage：拜访 Document 源的对象 Storage；将数据存储在浏览器会话中。相似sessionStorage，但数据可长期保留；而页面会话完结时，sessionStorage 数据会革除。（只读）
window.menubar：查看 visibility 属性的菜单栏对象，用来示意是否可见。（只读）
window.outerHeight：整个浏览器窗口的高度（单位：像素）。（只读）
window.outerWidth：整个浏览器窗口的宽度（单位：像素）。（只读）
window.parent：以后窗口或子窗口的父窗口的援用。（只读）
window.personalbar：查看 visibility 属性的集体工具栏对象，用来示意是否可见。（只读）
window.scrollX：页面程度方向滚动间隔（单位：像素），window.pageXOffset是别名。（只读）
window.scrollY：页面垂直方向已滚动间隔（单位：像素），window.pageYOffset是别名。（只读）
window.scrollbars：查看 visibility 属性的滚动条对象，用来示意是否可见。（只读）
window.self：指向以后 window 对象的援用。
window.sessionStorage：容许拜访以后源的 sessionStorage对象。与 localStorage 类似，不同在于 sessionStorage 在页面会话完结时革除，而 localStorage 没有过期工夫。
window.top：窗口层级最顶层窗口的援用。
window.window：window对象自身。

介绍了一些 window 的属性，上面咱们看一下对于 window 的办法。

window有三种音讯框：正告框 alert、确认框 confirm 和提示框prompt。

window.alert(message)会显示一个正告对话框，下面显示有指定的文本内容以及一个确定按钮。例如 window.alert("正告框来袭"); 的显示如下：

window.confirm(message)是一个具备可选音讯的模态框。用于验证是否承受用户操作的确认框。

var result = window.confirm("你要来到吗？");
if (result) {
    // 按下确定后执行的操作
    console.log("确定");
} else {
    // 按下勾销后执行的操作
    console.log("勾销");
}

运行后果：

window.prompt(text, value) 是用于显示文字信息提醒用户输出文字的提示框。

text参数为提醒用户输出信息的提醒内容，可省略。
value参数为文本输入框中的默认值，可省略。

var result = window.prompt("你的生日是什么时候的？", "1997-01-01");
if (result == "2011-10-23") {alert("你和我生日一样耶！");
}

成果如下：

点击确定后，文本输入框中文字被返回。如果为空，则返回一个空字符串。点击勾销后，返回null。

三个办法都具备梗塞效应，一旦弹出对话框，整个页面就暂停执行，期待用户做出反馈。

window还有几种办法管制窗口。例如open()、close()、stop()、moveBy()/moveTo()、resizeBy()/resizeTo()。上面介绍一下他们的性能。

window.open(url, target, features, replace)办法用于创立新的窗口。

url参数为新窗口加载的URL。
target参数为新窗口的名字。每个窗口都有一个 window.name，这里能够指定窗口用于弹窗，如果不存在，新建窗口。这个名字可用作<a> 或<form>的属性 target 的值。字符串中不能含有空白字符。留神：target不是新窗口题目。
features参数为字符串值，内容用逗号分隔，参数不能有空格，例如width=200,height=100。

var params = 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000';
window.open('/', 'test', params);

features能够设置的值有：

left/top：新窗口的最右边（left）与最顶部（top）的间隔（单位：像素）。新窗口可见，不能设置在屏幕以外。
width/height：新窗口的宽度和高度（单位：像素）。宽高不得小于100。
outerWidth/outerHeight：整个浏览器窗口的宽高。（单位：像素）。宽高不得小于100。
menubar：是否显示菜单栏。
toolbar：是否显示工具栏。
location是否显示地址栏。
personalbar：是否显示用户装置的工具栏。
status：是否显示状态栏。
resizable：新窗口是否可调整大小。
scrollbars：是否呈现滚动条。
titlebar：是否显示标题栏。
close：是否显示敞开按钮。

同源策略，窗口只可拜访雷同协定下的内容（雷同协定://domain:port）。

window.close()办法用于敞开以后窗口，个别只用来敞开 window.open() 办法新建的窗口。应用 window.closed 属性来判断窗口是否被敞开。

在以后窗口中敞开窗口：

window.close();

window.stop()办法等同于单击浏览器的进行按钮。因为脚本加载程序，该办法不能阻止曾经蕴含在加载中的文档，但能阻止图片、新窗口和提早加载的对象的加载。

window.stop();

window.moveBy(deltaX, deltaY)办法依据指定的值，挪动以后窗口。

deltaX：窗口在程度方向挪动的像素值。
deltaY：窗口在垂直方向挪动的像素值。

window.moveTo(x, y)办法将以后窗口挪动到指定的坐标地位。

x：程度方向挪动的横坐标
y：竖直方向挪动的纵坐标

moveBy()产生的是绝对挪动，moveTo()产生的是相对挪动。

当合乎下列状况时，一般网页中的 JavaScript 无奈通过调用该函数来挪动浏览器窗口：

以后窗口或标签页不是由 window.open 办法创立的；
以后标签页所在的窗口蕴含有多个标签页。

window.resizeBy(xDelta, yDelta)办法用于调整窗口的大小。

xDelta：窗口程度方向变动的像素值。
yDelta：窗口垂直方向变动的像素值。

window.resizeTo(aWidth, aHeight)办法用于调整窗口的大小。

aWidth：整数，示意新的outerWidth（单位：像素）。
aHeight：整数，示意新的outerHeight（单位：像素）。

resizeBy()绝对大小形式调整窗口大小，resizeTo()相对大小形式调整窗口大小。

根据上面的规定，一般网页中的 JavaScript 无奈通过调用该函数来调整浏览器窗口大小：

不能设置哪些不是通过 window.open 创立的窗口或 Tab 的大小；
当一个窗口外面蕴含有一个以上 Tab 时，无奈设置窗口的大小。

window.scroll()滚动窗口至文档中的特定地位，
window.scrollBy()按窗口指定偏移量滚动文档，
window.scrollTo()滚动窗口至文档中的特定地位。

下面的三个办法的参数都能够是 x-coord 和y-coord两个参数，或者 options 一个参数。

x-coord：程度方向像素点横坐标。
y-coord：垂直方向像素点纵坐标。

或者

options：一个 ScrollToOptions 字典。

// 在横轴上挪动到第 100 个像素置于窗口右边，在纵轴上挪动到第 100 个像素置于窗口顶部
window.scroll(100, 100);
// 或者
window.scroll({
    top: 100,
    left: 100,
    behavior: 'smooth'
});

options有三个属性：

top：垂直方向滚动的像素值
left：程度方向滚动的像素值
behavior：滚动形式，smooth、instant和auto，默认值auto。

写法也一样，然而性能不一样。window.scrollBy()滚动指定的间隔，window.scroll()滚动至文档中的相对地位，window.scrollTo()实际上和 window.scroll() 办法是雷同的。

window.print()办法关上打印对话框打印以后文档。

在开发我的项目中，有网页提供打印服务的话，咱们能够在页面中设置一个按钮，调用打印性能；但在之前，咱们须要判断是否反对打印性能。

if (typeof window.print === 'function') {
    // 反对打印性能
        document.getElementById('printLink').onclick = function () {window.print();
    }
}

应用 window.focus() 和window.blur()办法能够是窗口取得或失去焦点。

还有一些办法，这里就不介绍了。

location对象提供以后窗口中加载的文档无关信息，还提供了一些导航性能。即是 window 对象的属性，也是 document 对象的属性。还能够解析 URL。上面列出一些location 的属性。

location.href：残缺的 URL 值，容许更新。
location.origin：域名规范模式。蕴含协定、域名、端口号。
location.protocol：以后 URL 的协定，包含冒号（:）。
location.host：域名，蕴含 : 前面的端口号。
location.hostname：域名，不包含端口号。
location.port：端口号。
location.pathname：URL中门路的局部，从 / 开始。
location.search：URL参数局部，从问号 ? 开始。
location.hash：块标识符局部，从 # 开始。
location.username：URL域名前的用户名。
location.password：URL域名前的明码。

只有 origin 属性是只读的，其它属性都可写。

咱们给出一个网址http://localhost:8088/mall/?page=1&userid=2#part=top，应用下面的属性来获取它。

location.href;        // http://localhost:8088/mall/?page=1&userid=2#part=top
location.origin;    // http://localhost:8088
location.protocol;    // http:
location.host;        // localhost:8080
location.hostname;    // localhost
location.port;        // 8088
location.pathname;    // /mall/
location.search;    // ?page=1&userid=2
location.hash;        // #part=top

然而 location.search 获取的是所有内容，没方法一一获取每个查问字符串参数。咱们能够创立一个函数用以解析并返回蕴含所有参数的对象。

function getQueryArgs() {
    // 取的查问字符串并去掉结尾问号
    var qa = (location.search.length > 0 ? location.search.substring(1) : ""),
    // 保留数据的对象
    args = {},
    // 取的每一项
    items = qa.length ? qa.split("&") : [],
    // 每一项和该项的键值
    item = null,name = null,value = null,
    len = items.length;
    // 一一将每一项增加到 args 对象中
    for (let i = 0; i < len; i++) {item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {args[name] = value;
        }
    }
    return args;
}

留神，如果对 location.href 写入新的 URL 地址，浏览器会立即跳转到这个新地址。

除了上述的属性外，location还有几个办法。

location.assign(url)办法接管 URL 字符串来使浏览器立刻跳转。而参数有效时会报错。

location.assign('http://www.sample.com');

而给 window.location 和location.href两个属性赋值与调用 assign() 办法成果一样。

location.replace()与 location.assign() 办法相似，都是跳转到新的 URL，但不会在浏览历史History 外面生成新的记录，后退按钮无奈回到以后页面。当脚本发现以后是挪动设施时，能够应用 replace 跳转到挪动版网页。

// 跳转到新的网址
location.replace('http://www.sample.com');

location.reload(boolean)办法用于从新加载以后页面。当参数为 false 或为空时，浏览器将该网页从本地缓存从新加载并定位到以后地位。参数为 true 时，浏览器向服务器从新申请，并定位到顶部（即scroillTop===0）。

location.reload();            // 从新加载（有可能从缓存中加载）location.reload(true);        // 从新加载（从服务器从新加载）

在 reload() 之后的代码有可能不会执行，取决于网络提早或系统资源等因素。最好将 reload() 放在代码最初一行。

location.toString()办法返回整个 URL 字符串，相当于读取 location.href 属性。

navigator用于获取以后浏览器信息。能够应用 window.navigator 属性检索 navigator 对象。

appCodeName：浏览器的代号名称。Mozilla，Netscape 6 和 IE5 的外部名称都是Mozilla。（只读）
appName：浏览器的名称。因为兼容性问题，HTML5 标准容许该属性返回Netscape。（只读）
appVersion：浏览器版本号。个别不与理论版本对应。（只读）
connection：提供 NetworkInformation 对象来获取设施的网络连接信息。（只读）
cookieEnabled：浏览器以后页面是否启用cookie。（只读）
geolocation：返回 Geolocation 对象，可拜访设施的地位信息。平安思考会提醒受权。（只读）
hardwareConcurrency：浏览器环境领有的 CPU 外围数。（只读）
keyboard：返回 Keyboard 对象，提供检索键盘布局图和切换从物理键盘捕捉按键的性能。（只读）
language：浏览器主语言。（只读）
languages：访客所应用的语言数组，按优先顺序排列。第一个元素赋给 language，当值扭转时，window 触发 languagechange 事件。（只读）
mimeTypes：返回 MimeTypeArray 对象，蕴含可被辨认的 MimeType 对象的数组。（只读）
maxTouchPoints：返回以后设施同时反对触摸接触点的最大数量。（只读）
onLine：示意浏览器以后是否联网。（只读）
oscpu：返回客户端计算机的操作系统或应用的 CPU。在 Firefox 中能够获取此值。
permissions：返回一个可用于查问或更新某些 APIs 的权限状态的对象。（只读）
platform：浏览器所在零碎平台类型。不确定此值是否无效。（只读）
plugins：返回 PluginArray 对象，蕴含浏览器装置的所有插件。（只读）
product：以后浏览器产品名称。以兼容为目标，返回 "Gecko" 值。（只读）
serviceWorker：返回 ServiceWorkerContainer 对象，提供对 ServiceWorker 的注册、删除、降级和通信的拜访。（只读）
storage：返回单例 StorageManager 对象，用于保护数据的长久化存储，大抵确定存储数据的空间。（只读）
userAgent：返回以后浏览器的用户代理。（只读）
vendor：浏览器的供应商。例如 Chrome 中显示Google Inc.。
vendorSub：无关供应商的主要信息。

在介绍一下 navigator 对象中的一些办法。

javaEnabled()表明浏览器是否启用 Java。是以后配置文件是否容许应用 Java，而不是浏览器是否反对 Java。

if (window.navigator.javaEnabled()) {// 浏览器中 Java 可用}

sendBeacon(url, data)是用于通过 HTTP 将大量数据异步传输到 Web 服务器。当传输胜利时会返回true。

url为发送的地址；
data是 ArrayBufferView、Blob、DOMString 或者 FormData 类型的数据。

上面的例子展现了一个实践的统计代码——卸载事件处理器中尝试通过一个同步的 XMLHttpRequest 向服务器发送数据。这导致了页面卸载被提早。

window.addEventListener('unload', logData, false);
func logData() {var client = new XMLHttpRequest();
    client.open("POST", "/log", flase);    // 第三个参数表明是同步的 xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(analyticsData);
}

这就是 sendBeacon() 办法存在的意义。应用 sendBeacon() 办法会使用户代理在有机会时异步地向服务器发送数据，同时不会提早页面的卸载或影响下一导航的载入性能。这就解决了提交剖析数据时的所有的问题：数据牢靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其它技术简略许多！

上面的例子展现了一个实践上的统计代码模式——通过应用 sendBeacon() 办法向服务器发送数据。

window.addEventListener('unload', logData, false);
function logData() {navigator.sendBeacon("/log", analyticsData);
}

registerProtocolHandler(scheme, url, title)能够让 Web 站点为本身注册能用于关上或解决特定协定的性能。

scheme：蕴含站点解决协定的字符串。例如，传入 "sms" 来注册解决 SMS 文本信息链接。
url：处理器的 URL 字符串。应该蕴含一个 "%" 占位符，会被将要受理的文档的 escaped 链接所替换。这个链接可能是一个实在URL，或者是一个电话号码，邮件地址之类的。
title：处理器题目。展现给用户，例如弹出 ” 容许站点解决 [scheme] 链接吗？” 或者在浏览器设置中列出注册的处理器时。

处理器的 URL 必须以 http 或者 https 协定标记结尾，最好是https，以满足一些浏览器出于平安思考的要求。

screen对象示意以后屏幕窗口，往往指以后正被渲染的 window 对象，提供显示设施的信息。用途不大。次要介绍几种属性。

availTop：返回浏览器可用空间在屏幕上边的像素值。
availLeft：返回浏览器可用空间在屏幕右边的像素值。
availWidth：返回浏览器可用空间的程度宽度。
availHeight：返回浏览器可用空间的垂直高度。
colorDepth：返回屏幕的色彩深度（color depth）。依据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height：返回屏幕的高度（单位：像素）。
orientation：返回一个 ScreenOrientation 实例，示意以后屏幕的方向。
pixelDepth：返回屏幕的位深度 / 色调深度（bit depth）。依据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
width：返回屏幕的宽度（单位：像素）。

history对象保留着浏览器的历史记录。出于平安思考，开发人员无奈得悉用户浏览器的 URL。但能通过历史列表实现后退和后退。上面是 history 对象次要的属性。

length：返回以后窗口历史列表中的 URL 数量。
scrollRestoration：容许 Web 应用程序在历史列表上显示地设置默认滚动复原行为。
state：history堆栈最上层的状态值。

const scrollRestoration = history.scrollRestoration;
if (scrollRestoration) {
    // 避免主动复原页面地位
    history.scrollRestoration = 'manual';
} else {
    // 查看以后页面滚动复原行为
    console.log('The location on the page is not restored, user will need to scroll manually.');
}

还能够通过 history 提供的办法来拜访历史记录。

go()办法能够在用户的历史记录中任意跳转。传递数值为跳转的页数。

history.go(-1);        // 返回一页
history.go(2);        // 后退两页

也能够传递历史记录中存在的字符串参数，如果历史记录中不蕴含传递的字符串，那什么也不做。

history.go("sample.com");

还能够应用 back() 办法后退和应用 forward() 办法后退来代替 go() 办法的性能。

留神，挪动到以前拜访过的页面时，页面通常是从浏览器缓存之中加载，而不是从新要求服务器发送新的网页。

pushState(state, title, url)办法可能在不加载页面的状况下在历史中增加一条记录。这个办法接管三个参数：

state参数是状态对象，与 pushState 增加的记录相关联。示意浏览器的 state 属性。
title参数是 document.title 的值，个别设定为null。浏览器大多会疏忽。
url参数指定新历史记录，用以扭转以后url。这个参数不能跨域，即协定，域名，端口必须是雷同的，如果呈现跨域的状况，即会提醒。

history.pushState({id:1}, null, '?page=1');

replaceState(stateObj, title, url)办法用来批改 history 对象的以后记录，它是替换以后页面在浏览器的历史记录。假如以后网页是sample.com/index.html

history.pushState({id:1}, 'title1', '?page=1');    // URL 显示为 http://sample.com/index.html?page=1
history.pushState({id:2}, 'title2', '?page=2');    // URL 显示为 http://sample.com/index.html?page=2
history.replaceState({id:3}, 'title3', '?page=3');    // URL 显示为 http://sample.com/index.html?page=3
history.back();    // URL 显示为 http://sample.com/index.html?page=1
history.back();    // URL 显示为 http://sample.com/index.html
history.go(2);    // URL 显示为 http://sample.com/index.html?page=3

当增加或更改历史记录时，会触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState() 的调用创立的，或者受到对 history.replaceState() 的调用的影响，popstate事件的 state 属性蕴含历史条目标状态的正本。

须要留神的是调用 history.pushState() 或history.replaceState()不会触发 popstate 事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器返回按钮（或者在 JavaScript 代码中调用 history.back() 或者 history.forward() 办法）。

BOM是以 window 对象为依靠的浏览器对象模型，它将浏览器当作一个对象，用于与浏览器窗口进行交互。window对象还是 Global 对象，全局变量和函数都是它的属性和办法，且所有原生的构造函数及其它函数也在它的命名空间下。但每个浏览器厂商都有本人的 BOM 实现，因而兼容性较差。

更多内容请关注公众号「海人的博客」，回复「资源」即可取得收费学习资源！

关于程序员:快速了解JavaScript的BOM模型

window 对象

音讯框

窗口关上 & 敞开

窗口挪动

窗口滚动

打印

弹窗的聚焦 / 失焦

location

assign

replace

reload

navigator 对象

javaEnabled

sendBeacon

registerProtocolHandler

screen 对象

history 对象

go

pushState

replaceState

postate 事件

总结