JS高级程序设计（12）

BOM

浏览器对象模型BOM提供了与网页无关的浏览器功能对象。

---

一、window对象

BOM的核心是window对象，表示浏览器的实例。window对象在浏览器中由两重身份，一是ECMAScript中的Global对象，另一个就是浏览器窗口的JavaScript接口。

1.Global作用域

因为window对象被复用为ECMAScript的Global对象，所以通过var声明的所有全局变量和函数都会变成window对象的属性和方法，使用let或const替代var，则不会把变量添加给全局对象。

2.窗口关系

top对象始终指向最上层（最外层）窗口，及浏览器窗口本身。parent对象则始终指向当前窗口的父窗口。self对象始终指向window。

3.窗口位置与像素比

screenLeft和screenTop属性表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是CSS像素。
moveTo()和moveBy()方法移动。moveTo()接收要移动到的新位置的绝对坐标x和y。而moveBy()则接收相对当前位置在两个方向上移动的像素数。
代码如下（示例）：

//把窗口移动到左上角
window.moveTo(0,0);
//把窗口向下移动100像素
window.moveBy(100,100);

4.窗口大小

outerWidth和outerHeight返回浏览器窗口自身的大小。innerWidth和innerHeight返回浏览器窗口中页面视口大小，不包括工具条和滚动条。
可以使用resizeTo()和resizeBy()方法调整窗口大小。resizeTo()接收新的高度和宽度值，而resizeBy()接收宽度和高度各要缩放多少。

5.视口位置

度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.scrollX和window.pageYoffset和window.scrollY。
scroll()、scrollTo()和scrollBy()方法滚动页面。这三个方法都接收表示相对视口距离的x和y坐标，这两个参数在前两

个方法中表示要滚动到的坐标，最后一个方法中表示滚动的距离。

6.导航与打开新窗口

window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。这个方法接收4个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。
代码如下（示例）：

window.open("http://www.wrox.com/","topFrame");

特性字符串是一个逗号分隔的设置字符串，用于指定新窗口包含的特性。

设置	值	说明
fullscreen	“yes"或"no”	表示新窗口是否最大化。仅限IE支持
height	数值	新窗口高度。这个值不能小于100
left	数值	新窗口x轴坐标（不能负值）
location	“yes"或"no”	表示是否显示地址栏
Menubar	“yes"或"no”	表示是否显示菜单栏（默认"no"）
resizable	“yes"或"no”	表示是否可以拖动改变新窗口大小（默认"no"）
scrollbars	“yes"或"no”	表示是否可以在内容过长时滚动（默认"no"）
status	“yes"或"no”	表示是否显示状态栏
toolbar	“yes"或"no”	表示是否显示工具栏
top	数值	新窗口的y轴坐标
width	数值	新窗口的宽度

close()方法关闭新打开的窗口，只能用于window.open()创建的弹出窗口。opener属性指向打开它的窗口。

7.定时器

JavaScript在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应代码。setTimeout()用于指定在一定时间后执行某行代码，而setInterval()用于指定每隔一段时间执行某些代码。
setTimeout()方法通常接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。clearTimeout()方法可以取消超时任务。
代码如下（示例）：

//在1秒后显示警告框
let timeoutId=setTimeout( () => alert("Hello world!"),1000);
clearTimeout(timeoutId);

setInterval()方法接收两个参数：要执行的代码，以及把下一次执行定时代码的任务添加到队列要等待的时间（毫秒）。clearInterval()取消超时任务。

8.系统对话框

使用alert()、confirm()和prompt()方法，可以让刘兰兰器调用系统对话框向用户显示消息。它们的外观由操作系统或者浏览器决定，无法使用CSS设置。这些对话框都是同步的模态对话框，即在它们显示时，代码会停止执行，在它们消失后，代码才会恢复执行。
警告框（alert）通常用于向用户显示一些它们无法控制的消息。用户唯一的选择就是在看到警告框后把它关闭。

确认框（confirm）有两个按钮：“Cancel”和“OK”。用户通过点击不同的按钮表明希望接下来执行什么操作。

提示框（prompt）用于提示用户输入消息，除了OK和Cancel按钮，提示框还会显示一个文本框让用户输入内容。给方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。

JavaScript还可以显示另外两种对话框：find()和print()。这两种对话框都是异步显示的，即控制权会立即返回给脚本。

二、location对象

location是最有用的BOM对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。
假设加载的URL为http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents，location对象的内容：

属性	值	说明
location.hash	“#contents”	URL散列值（井号后跟零或多个字符）
location.host	“www.wrox.com:80”	服务器名及端口号
location.hostname	“www.wrox.com”	服务器名
location.href	"http://www.wrox.com:80/WileyCDA/?q=javascript#contents"当前加载页面的完整URL
location.pathname	“/WileyCDA/”	URL中的路径和文件名
location.port	“80”	请求的端口
location.protocol	“http:”	页面使用的协议
location.search	“?q=javascript”	域名前指定的用户名
location.password	“barpassword”	域名前指定的密码
location.origin	"http://www/wrox.com	URL的源地址

1.查询字符串

解析查询字符串：
代码如下（示例）：

let getQueryStringArgs=function(){
  //取得没有开头问号的查询字符串
  let qs=(location.search.length > 0 ? location.search.substring(1) : ""),
    //保存数据的对象
    args={};
    //把每个参数添加到args对象
    for(let item of qs.split("&").map(kv=> kv.split("="))){
      let name=decodeURIComponent(item[0]),
        value=decodeURIComponent(item[1]);
      if(name.length){
        args[name]=value;
      }
    }
  return args;
}

2.操作地址

可以使用assign()、location.href或window.location设置一个URL。

三、navigator对象

1.检测插件

plugins数组检测插件，属性：

• name：插件名称
• description：插件介绍
• filename：插件的文件名
• length：由当前插件处理的MIME类型数量。

2.注册处理

registerProtocolHandler()方法可以把一个网站注册为处理某种特定类型信息应用程序。

四、screen对象

screen对象保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器信息。

五、history对象

history对象表示当前窗口首次使用以来用户的导航历史记录。

1.导航

go()方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。这个方法只接收一个参数，这个参数可以是一个整数，表示前进或后退多少步。
go()由两个简写方法：back()和forward()。这两个方法模拟了浏览器的后退按钮和前进按钮。

总结

浏览器对象模型（BOM）是以window对象为基础的，这个对象代表了浏览器窗口和页面可见的区域。window对象也被复用为ECMAScript的Global对象，因此所有全局变量和函数都是它的属性，，而且所有原生类型的构造函数和普通函数也都从一开始就存在于这个对象之上。本章讨论BOM的一下内容：
 要引用其他window对象，可以使用几个不同的窗口指针。
 要通过location对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可以改变浏览器URL中的某一部分或全部。
 使用replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新URL。
 navigator对象提供关于浏览器的信息。提供的信息类型取决于浏览器，不过有些属性如userAgent是所有浏览器支持的。
BOM中的另外两个对象也提供了一些功能。screen对象中保存着客户端显示器的信息。这些信息通常用语评估浏览网站的设备信息。history对象提供了操纵浏览器的历史记录的能力，开发者可以确定历史记录中包含多少个条目，并以编程的方式实现在历史记录中导航，而且也可以修改历史记录。