目标：

  • bom对象
  • window
  • location
  • history

一、bom的定义

  • DOM是一套操作HTML标签的API（接口/方法/属性）
  • BOM是一套操作浏览器的API（接口/方法/属性）

二、常见的bom对象

  • window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
  • Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
  • Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
  • History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
  • Screen：代表用户的屏幕信息

2.1、window

window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

全局作用域

在客户端浏览器中，window 对象是访问 BOM 的接口，如引用 document 对象的 document 属性，引用自身的 window 和 self 属性等。同时 window 也为客户端 JavaScript 提供全局作用域。

由于 window 是全局对象，因此所有的全局变量都被解析为该对象的属性

var a = "window.a";  //全局变量
function f () {  //全局函数
    console.log(a);
}
console.log(window.a);  //返回字符串“window.a”
window.f();  //返回字符串“window.a”
访问客户端对象

使用 window 对象可以访问客户端其他对象，这种关系构成浏览器对象模型，window 对象代表根节点，浏览器对象关系的关系如图所示，每个对象说明如下。

  • window：客户端 JavaScript 顶层对象。每当 或 标签出现时，window 对象就会被自动创建。
  • navigator：包含客户端有关浏览器信息。
  • screen：包含客户端屏幕的信息。
  • history：包含浏览器窗口访问过的 URL 信息。
  • location：包含当前网页文档的 URL 信息。
  • document：包含整个 HTML 文档，可被用来访问文档内容及其所有页面元素。

使用系统对话框

window 对象定义了 3 个人机交互的方法，主要方便对 JavaScript 代码进行调试。

  • alert()：确定提示框。由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则弹出一个空的对话框。
  • confirm()：选择提示框。。由浏览器向用户弹出提示性信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”按钮。如果点击“确定”按钮，则该方法将返回 true；单击“取消”按钮，则返回 false。confirm() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。
  • prompt()：输入提示框。可以接收用户输入的信息，并返回输入的信息。prompt() 方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。
var user = prompt("请输入您的用户名");
if (!! user) {  //把输入的信息转换为布尔值
    var ok = confirm ("您输入的用户名为：\n" + user + "\n 请确认。");  //输入信息确认
    if (ok) {
        alert ("欢迎您：\n" + user);
    } else {  //重新输入信息
        user = prompt ("请重新输入您的用户名：");
        alert ("欢迎您：\n" + user);
    }
} else {  //提示输入信息
    user = prompt ("请输入您的用户名：");
}

显示系统对话框的时候，JavaScript 代码会停止执行，只有当关闭对话框之后，JavaScript 代码才会恢复执行。因此，不建议在实战中使用这 3 种方法，仅作为开发人员的内测工具即可。

打开和关闭窗口

使用 window 对象的 open() 方法可以打开一个新窗口。用法如下：

window.open (URL, name, features, replace)

参数列表如下：

  • URL：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。

  • name：可选字符串，声明新窗口的名称。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features 参数将被忽略。

  • features：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。

  • replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

    channelmode=yes|no|1|0是否使用剧院模式显示窗口。默认为 no。
    directories=yes|no|1|0是否添加目录按钮。默认为 yes。
    fullscreen=yes|no|1|0是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
    height=pixels窗口文档显示区的高度。以像素计。
    left=pixels窗口的 x 坐标。以像素计。
    location=yes|no|1|0是否显示地址字段。默认是 yes。
    menubar=yes|no|1|0是否显示菜单栏。默认是 yes。
    resizable=yes|no|1|0窗口是否可调节尺寸。默认是 yes。
    scrollbars=yes|no|1|0是否显示滚动条。默认是 yes。
    status=yes|no|1|0是否添加状态栏。默认是 yes。
    titlebar=yes|no|1|0是否显示标题栏。默认是 yes。
    toolbar=yes|no|1|0是否显示浏览器的工具栏。默认是 yes。
    top=pixels窗口的 y 坐标。
    width=pixels窗口的文档显示区的宽度。以像素计。

使用 window 的 close() 方法可以关闭一个窗口。例如，关闭一个新创建的 win 窗口可以使用下面的方法实现。

win.close();

如果在打开窗口内部关闭自身窗口，则应该使用下面的方法。

window.close();

使用 window.closed 属性可以,’'检测当前窗口是否关闭，如果关闭则返回 true，否则返回 false。

2.2、navigator (了解)

navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。

var s = window.navigator.userAgent;
  //简写方法
var s = navigator.userAgent;
console.log(s);
//返回类似信息：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
检测浏览器类型和版本号

检测浏览器类型和版本就比较容易了，用户只需要根据不同浏览器类型匹配特殊信息即可。

var ua = navigator.userAgent.toLowerCase();  //获取用户端信息
var info = {
    ie : /msie/ .test(ua) && !/opera/ .test(ua),  //匹配IE浏览器
    op : /opera/ .test(ua),  //匹配Opera浏览器
    sa : /version.*safari/.test(ua),  //匹配Safari浏览器
    ch : /chrome/.test(ua),  //匹配Chrome浏览器
    ff : /gecko/.test(ua) && !/webkit/.test(ua)  //匹配Firefox浏览器
};
//在脚本中调用该对象的属性，如果为 true，说明为对应类型浏览器，否则就返回 false。
(info.ie) && console.log("IE浏览器");
(info.op) && console.log("Opera浏览器");
(info.sa) && console.log("Safari浏览器");
(info.ch) && console.log("Chrome浏览器");
(info.ff) && console.log("Firefox浏览器");
检测操作系统

navigator.userAgent 返回值一般都会包含操作系统的基本信息，不过这些信息比较散乱，没有统一的规则。用户可以检测一些更为通用的信息，如检测是否为 Windows 系统，或者为 Macintosh 系统，而不去分辨操作系统的版本号。

例如，如果仅检测通用信息，那么所有 Windows 版本的操作系统都会包含 “Win”字符串，所有 Macintosh 版本的操作系统都会包含“Mac”字符串，所有 Unix 版本的操作系统都会包含有“X11”，而 Linux 操作系统会同时包含“X11”和“Linux”。

通过下面方法可以快速检测客户端信息中是否包含上述字符串。

['Win', 'Mac', 'X11', 'Linux'].forEach (function (t) {
    (t === 'X11') ? t = 'Unix' : t;  //处理Unix系统的字符串
    navigator['is' + t] = function () {  //为navigator对象扩展专用系统检测方法
        return navigator.userAgent.indexOf(t) != -1;  //检测是否包含特定字符串
    };
});
console.log(navigator.isWin());  //true
console.log(navigator.isMac());  //false
console.log(navigator.isLinux());  //false
console.log(navigator.isUnix());  //false

2.3、location

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。

location 对象定义了 8 个属性，其中 7 个属性可以获取当前 URL 的各部分信息，另一个属性（href）包含了完整的 URL 信息，详细说明如下表所示。为了便于更直观的理解，下表中各个属性将以下面 URL 示例信息为参考进行说明。

属性说明
href声明了当前显示文档的完整 URL，与其他 location 属性只声明部分 URL 不同，把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容
protocol声明了 URL 的协议部分，包括后缀的冒号。例如：“http:”
host声明了当前 URL 中的主机名和端口部分。例如：“www.123:80”
hostname声明了当前 URL 中的主机名。例如：“www.123”
port声明了当前 URL 的端口部分。例如：“80”
pathname声明了当前 URL的路径部分。例如：“news/index.asp”
search声明了当前 URL 的查询部分，包括前导问号。例如：“?id=123&name=location”
hash声明了当前 URL 中锚部分，包括前导符（#）。例如：“#top”,指定在文档中锚记的名称

下面定义了一个获取 URL 查询字符串参数值的通用函数，该函数能够抽取每个参数和参数值，并以名/值对的形式存储在对象中返回。

var queryString = function () {  //获取URL查询字符串参数值的通用函数
    var q = location.search.substring (1);  //获取查询字符串，如“id=123&name=location”
    var a = q.split ("&");  //以&符号为界把查询字符串劈开为数组
    var o = {};  //定义一个临时对象
    for (var i = 0; i < a.length; i ++) {  //遍历数组
        var n = a[i].indexOf ("=");  //获取每个参数中的等号下标位置
        if (n == -1) continue;  //如果没有发现则跳到下一次循环继续操作
        var v1 = a[i].substring (0, n);  //截取等号前的参数名称
        var v2 = a[i].substring (n + 1);  //截取等号后的参数值
        o[v1] = unescape (v2);  //以名/值对的形式存储在对象中
    }
    return o;  //返回对象
}

然后调用该函数，即可获取 URL 中的查询字符串信息，并以对象形式读取它们的值。

var f1 = queryString ();  //调用查询字符串函数
for (var i in f1) {  //遍历返回对象，获取每个参数及其值
    console.log(i + "=" + f1[i]);
}

如果当前页面的 URL 中没有查询字符串信息，用户可以在浏览器的地址栏中补加完整的查询字符串，如“?id=123&name=location”，再次刷新页面，即可显示查询的字符串信息。

location 对象的属性都是可读可写的。例如，如果把一个含有 URL 的字符串赋给 location 对象或它的 href 属性，浏览器就会把新的 URL 所指的文档装载进来，并显示出来。

location = "http://c.biancheng/dede/";  //页面会自动跳转到对应的页面
location.href = "http://c.biancheng/";  //页面会自动跳转到对应的页面

location 对象还定义了两个方法：reload() 和 replace()。

  • reload()：可以重新装载当前文档。
  • replace()：可以装载一个新文档而无须为它创建一个新的历史记录。也就是说，在浏览器的历史列表中，新文档将替换当前文档。这样在浏览器中就不能通过单击“返回”按钮返回当前的文档。

对那些使用了框架并且显示多个临时页的网站来说，replace() 方法比较有用。这样临时页面都不被存储在历史列表中。

2.4、history

history 对象存储了库互动浏览器的浏览历史，通过 window 对象的 history 属性可以访问该对象，实际上 history 属性仅存储最近访问的、有限条目的 URL 信息。

在 HTML5 之前，为了保护客户端浏览信息的安全和隐私，history 对象禁止 JavaScript 脚本直接操作这些访问信息。不过 HTML5 新增了一个 History API，该 API 允许用户通过 JavaScript 管理浏览器的历史记录，实现无刷新更改浏览器地址栏的地址，配合 History + Ajax 可以设计不需要刷新页面的跳转。

在历史记录中后退
window.history.back();

这行代码等效于在浏览器的工具栏上单击“返回”按钮。

在历史记录中前进

window.history.forward();

这行代码等效于浏览器中单击“前进”按钮。

移动到指定的历史记录点

使用 go() 方法从当前会话的历史记录中加载页面。当前页面位置索引值为 0，上一页就是 -1，下一页为 1，以此类推。

window.history.go(-1);  //相当于调用 back()
window.history.go(1);  //相当于调用forward()
History.go(0)  //表示刷新当前的页面

length 属性

使用 length 属性可以了解历史记录栈中一共有多少页。

var num = window.history.length;

2.5、screen对象

screen 对象存储了客户端屏幕信息，这些信息可以用来探测客户端硬件配置。利用 screen 对象可以优化程序的设计，提升用户体验。

更多推荐

6.1 Js基础 BOM