本文大多引用来自C语言中文网
BOM简介
BOM是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window，被广泛应用于 Web 开发之中，主要用于客户端浏览器的管理。
BOM 概念比较古老，但是一直没有被标准化，不过各主流浏览器均支持 BOM，都遵守最基本的规则和用法，W3C 也将 BOM 主要内容纳入了 HTML5 规范之中。
- window：客户端 JavaScript 顶层对象。每当
<body>或<frameset>标签出现时，window 对象就会被自动创建。 - navigator：包含客户端有关浏览器信息。
- screen：包含客户端屏幕的信息。
- history：包含浏览器窗口访问过的 URL 信息。
- location：包含当前网页文档的 URL 信息。
- document：包含整个 HTML 文档，可被用来访问文档内容及其所有页面元素。
window
window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window
对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。 访问客户端对象 使用 window
对象可以访问客户端其他对象，这种关系构成浏览器对象模型。
打开和关闭窗口
使用 window 对象的 open() 方法可以打开一个新窗口。用法如下：
window.open (URL, name, features, replace)
参数列表如下：
- URL：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。
- name：可选字符串，声明新窗口的名称。这个名称可以用作标记
<a>和<form>的 target 目标值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features 参数将被忽略。 - features：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。
- replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
该方法返回值为新创建的 window 对象，使用它可以引用新创建的窗口。
新窗口显示特征（features）
| 特征 | 说明 |
|---|---|
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。 |
toolbar = yes | no | 1 | 0 | 是否显示浏览器的工具栏。默认是 yes。 |
| top = pixels | 窗口的 y 坐标 |
| width = pixels | 窗口的文档显示区的宽度。单位为元素。 |
新创建的 window 对象拥有一个 opener 属性，引用打开它的原始对象。opener 只在弹出窗口的最外层 window 对象中定义，而且指向调用 window.open() 方法的窗口或框架。
win = window.open(); //打开新的空白窗口
win.document.write ("<h1>这是新打开的窗口</h1>"); //在新窗口中输出提示信息
win.focus (); //让原窗口获取焦点
win.opener.document.write ("<h1>这是原来窗口</h1>"); //在原窗口中输出提示信息
console.log(win.opener == window); //检测window.opener属性值
使用 window 的 close() 方法可以关闭一个窗口。例如，关闭一个新创建的 win 窗口可以使用下面的方法实现。
win.close();
如果在打开窗口内部关闭自身窗口，则应该使用下面的方法。
window.close();
使用 window.closed 属性可以检测当前窗口是否关闭，如果关闭则返回 true，否则返回 false。
定时器
使用定时器
window 对象包含 4 个定时器专用方法，说明如下表所示，使用它们可以实现代码定时执行，或者延迟执行，使用定时器可以设计演示动画。
| 方法 | 说明 |
|---|---|
| setInterval() | 按照执行的周期（单位为毫秒）调用函数或计算表达式 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式 |
| clearInterval() | 取消由 setInterval() 方法生成的定时器 |
| clearTimeout() | 取消由 setTimeout() 方法生成的定时器 |
- setTimeout() 方法
setTimeout() 方法能够在指定的时间段后执行特定代码。用法如下：
var o = setTimeout(code, delay);
参数 code 表示要延迟执行的字符串型代码，将在 Windows 环境中执行，如果包含多个语句，应该使用分号进行分隔。delay 表示延迟时间，以毫秒为单位。
如果希望反复执行 setTimeout() 方法中包含的代码，可以在 setTimeout() 方法中包含对自身的调用，这样就可以把自身注册为可以被反复执行的方法。
- setInterval() 方法
setInterval() 方法能够周期性执行指定的代码，如果不加以处理，那么该方法将会被持续执行，直到浏览器窗口关闭或者跳转到其他页面为止。用法如下：
var o = setInterval (code, interval)
该方法的用法与 setTimeout() 方法基本相同，其中参数 code 表示要周期执行的代码字符串，参数 interval 表示周期执行的时间间隔，以毫秒为单位。
使用框架集
HTML 允许使用 frameset 和 frame 标签创建框架集页面。另外，在文档中可以使用 iframe 标签创建浮动框架。这两种类型的框架性质是相同的.
控制窗口大小
window 对象定义了 3 组方法分别用来调整窗口位置、大小和滚动条的偏移位置：moveTo() 和 moveBy()、resizeTo() 和 resizeBy()、scrollTo() 和 scrollBy()。
这些方法都包含两个参数，分别表示 x 轴偏移值和 y 轴偏移值。
包含 To 字符串的方法都是绝对的，也就是 x 和 y 是绝对位置、大小或滚动偏移；
包含 By 字符串的方法都是相对的，也就是它们在窗口的当前位置、大小或滚动偏移上增加所指定的参数 x 和 y 的值。
方法 moveTo() 可以将窗口的左上角移动到指定的坐标，方法 moveBy() 可以将窗口上移、下移或左移、右移指定数量的像素。方法 resizeTo() 和 resizeBy() 可以按照绝对数量和相对数量调整窗口的大小。
navigator
navigator 对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过 window.navigator 可以引用该对象，并利用它的属性来读取客户端基本信息。
navigator详解
location
location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location
属性可以访问。
location 对象定义了 8 个属性，其中 7 个属性可以获取当前 URL 的各部分信息，另一个属性（href）包含了完整的 URL 信息。
| 属性 | 说明 |
|---|---|
| href | 声明了当前显示文档的完整 URL，与其他 location 属性只声明部分 URL 不同，把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容 |
| protocol | 声明了 URL 的协议部分，包括后缀的冒号。例如：“http:” |
| host | 声明了当前 URL 中的主机名和端口部分。例如：“www.123.cn:80” |
| hostname | 声明了当前 URL 中的主机名。例如：“www.123.cn” |
| port | 声明了当前 URL 的端口部分。例如：“80” |
| pathname | 声明了当前 URL的路径部分。例如：“news/index.asp” |
| search | 声明了当前 URL 的查询部分，包括前导问号。例如：“?id=123&name=location” |
| hash | 声明了当前 URL 中锚部分，包括前导符（#）。例如：“#top”,指定在文档中锚记的名称 |
location 对象还定义了两个方法：reload() 和 replace()。
reload()：可以重新装载当前文档。
replace()：可以装载一个新文档而无须为它创建一个新的历史记录。
history
window.history.back();1
在历史记录中后退，这行代码等效于在浏览器的工具栏上单击“返回”按钮。
window.history.forward();1
在历史记录中前进，这行代码等效于浏览器中单击“前进”按钮。
window.history.go(-1); //相当于调用 back()
window.history.go(1); //相当于调用forward()
移动到指定的历史记录点。使用 go() 方法从当前会话的历史记录中加载页面。当前页面位置索引值为 0，上一页就是 -1，下一页为 1，以此类推。
使用 length 属性可以了解历史记录栈中一共有多少页。
var num = window.history.length;
HTML5 新增 history.pushState() 和 history.replaceState() 方法，允许用户逐条添加和修改历史记录条目。
screen
screen 对象存储了客户端屏幕信息，这些信息可以用来探测客户端硬件配置。利用 screen
对象可以优化程序的设计，提升用户体验。例如，根据显示器屏幕大小选择使用图像的大小，或者根据显示器的颜色深度选择使用 16 色图像或 8
色图像，或者打开新窗口时设置居中显示等。
下面是如何让弹出的窗口居中显示的代码。
function center (url) { //窗口居中处理函数
var w = screen.availWidth / 2; //获取客户端屏幕宽度的一半
var h = screen.availHeight / 2; //获取客户端屏幕高度的一半
var t = (screen.availHeight - h) / 2; //计算居中显示时顶部坐标
var l = (screen.availWidth - w) / 2; //计算居中显示时左侧坐标
var p = "top=" + t + ",left=" + l + ",width=" + w + ",height=" + h; //设计坐标参数字符串
var win = window.open (url, "url", p); //打开指定的窗口，并传递参数
win.focus (); //获取窗口焦点
}
center ("c.biancheng.net"); //调用该函数
不同浏览器在解析 screen 对象的 width 和 height 属性时存在差异。
338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
