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

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

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

window 对象

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 无奈通过调用该函数来挪动浏览器窗口：

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

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

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

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

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

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

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

1. 不能设置哪些不是通过 window.open 创立的窗口或 Tab 的大小；
2. 当一个窗口外面蕴含有一个以上 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

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还有几个办法。

assign

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

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

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

replace

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

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

reload

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

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

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

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

navigator 对象

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

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

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

sendBeacon

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

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

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

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

screen 对象

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

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

history 对象

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

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

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

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

history.go("sample.com");

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

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

pushState

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

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

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

replaceState

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

postate 事件

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

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

总结

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

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