HTML BOM Browser对象

BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

Browser对象：指BOM提供的多个对象，包括：Window、Navigator、Screen、History、Location等。

其中Window对象为顶层对象，其他对象都为Window对象的子对象。

目录

1. Window 对象：表示浏览器打开的窗口，包括获取焦点、改变滚动条、设置定时器等等。

2. Navigator 对象：包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。

3. Screen 对象：包含屏幕信息。如：获取屏幕高度、宽度等等。

4. History 对象：可对当前页的浏览历史进行操作，如：前进、后退等。

5. Location 对象：可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。

1. Window 对象

1.1 说明

Window 对象：表示浏览器打开的窗口、标签或者框架(若当前页面里包含多个iframe，会为每个iframe创建Window对象)。

Window对象不会被实例化，调用属性和方法都作为window的静态成员。

调用方式：调用Window对象的成员时，可以省略前面的window。如：window.alert() 可写成 alert() 。

1.2 属性

 readonly ApplicationCache applicationCache ：返回窗口的应用缓存对象。

 readonly boolean closed ：返回窗口是否已经关闭。

 readonly Console console ：返回对Consol对象的引用，对浏览器控制台进行操作。

 readonly int devicePixelRatio ：返回设备像素比，即当前显示器的物理像素和设备独立像素(dip)的比例。

 readonly Document document ：返回当前窗口的Document对象。

 readonly Element frameElement ：若当前window处于一个<iframe>中，此属性返回这个IFrame。若在顶级窗口，返回null。

 readonly Window[] frames ：返回一个包含窗口内所有的框架的数组。

 readonly History history ：返回一个History对象。可对当前页的历史进行操作，如：前进、后退等。

 readonly long innerHeight ：返回当前窗口可显示HTML文档的高度，单位px(像素)。

 readonly long innerWidth ：返回当前窗口可显示HTML文档的宽度，单位px(像素)。

 readonly long length ：返回窗口内包含框架的数量，即frames数量。

 readonly Location location ：返回一个Location对象。可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。

 readonly LocalStorage localStorage ：返回一个键/值对存储的Storage对象，持续到被用户删除。

 string name ：设置或获取当前窗口的name。

 readonly Navigator navigator ：返回一个Navigator 对象。包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。

 Window openner ：返回对打开当前窗口的原窗口一个引用。若当前窗口是由另一个窗口打开的, window.opener保留对那个窗口的引用. 如果当前窗口不是由其他窗口打开的，则该属性返回 null。

 readonly long outerHeight ：返回当前浏览器的总高度，单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

 readonly long outerWidth ：返回当前浏览器的总宽度，单位px(像素)。包含工具栏、滚动条、浏览器边框等范围。

 readonly long pageXOffset ：返回文档横向滚动的距离，单位px(像素)。

 readonly long pageYOffset ：返回文档纵向滚动的距离，单位px(像素)。

 readonly Window parent ：返回当前窗口的父级窗口。若当前窗口是顶级窗口，返回当前窗口本身。若当前窗口为一个框架窗口，返回它的父窗口。

 readonly Screen screen ：返回一个Screen对象。包含屏幕信息。如：获取屏幕高度、宽度等等。

 readonly long screenX ：返回浏览器在屏幕的X坐标。

 readonly long screenY ：返回浏览器在屏幕的Y坐标。

 readonly long scrollX ：返回文档横向滚动的距离，单位px(像素)。与pageXOffset属性一样。

 readonly long scrollY ：返回文档纵向滚动的距离，单位px(像素)。与pageYOffset属性一样。

 readonly Window self ：返回一个对当前Window对象的引用。

 readonly SessionStorage sessionStorage ：返回一个键/值对存储的Storage对象，持续到当前浏览会话结束。

 readonly Window top ：返回当前窗口的顶级窗口。若当前窗口本身已经是顶级，则返回自身。若当前窗口为一个框架窗口，返回包含它的顶级窗口(parent只是返回父窗口)。

 readonly Window window ：返回当前窗口Window对象。

1.3 方法

 void addEventListener(string eventType,function eventListener) ：给窗口注册事件。eventType事件类型，如：click。eventListener：事件触发的函数或对象。

 void alert(string msg) ：弹出一个包含msg和一个确认按钮的警告框。

 string atob(string base64Str) ：将一个基于Base64编码的字符串解码为一个字符串。

 void blur() ：当前窗口移除焦点。

 string btoa(string str) ：将一个字符串编码为一个Base64编码。

 void clearInterval(long intervalHandle) ：停止intervalHandle指定的setInterval()。

 void clearTimeout(long timeoutHandle) ：停止timeoutHandle指定的setTimeout()。

 void close() ：关闭当前窗口。只能关闭由脚本打开的窗口，如：a元素打开新页面。

 boolean confirm(string msg) ：显示带有一段消息以及确认按钮和取消按钮的对话框。点击确认按钮返回true，点击取消按钮返回false。

 void focus() ：当前窗口获得焦点。

 void moveBy(long deltaX, long deltaY) ：使open()方法创建的窗口，在本身的位置上，水平移动deltaX个像素，垂直移动deltaY个像素。

 void moveTo(long x, long y) ：使open()方法创建的窗口，移动到x，y坐标。

 Window open(string url, string target, string features, string replace) ：创建一个新的窗口。

参数：
①url {string} ：新窗口加载的url。若没有指定，将使用"about:blank"。
②target {string}  ：新窗口的名称。若没有指定，将使用"_black"。注意此值并不是窗口标题。
③features {string} 可选 ：表示新窗口的特性，如：窗口功能和工具栏 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。

返回值：
{Window} 返回新窗口的引用。

方法详情

 void print() ：调用浏览器的打印按钮。

 string prompt(string msg) ：弹出一个显示msg信息并包含一个确定按钮和取消按钮的输入框。此输入框会阻塞页面，点击确定按钮返回输入的内容，点击取消按钮返回null。

 void resizeBy(long deltaWidth, long deltaHeight) ：使open()方法创建的窗口，在本身的位置上，宽度增加deltaWidth个像素，高度增加deltaHeight个像素。

 void resizeTo(long width, long height) ：使open()方法创建的窗口，宽度变为width，高度变为height。

 void scrollBy(long deltaWidth, long deltaHeight) ：在当前滚动的基础上，横向滚动deltaWidth像素，纵向滚动deltaHeight像素。

 void scrollTo(long width, long height) ：横向滚动到width像素距离上，纵向滚动到height像素距离上。

 long setInterval(function fn, long time) ：每隔一定的周期(毫秒)执行指定函数。

参数：
①fn {function} ：需要执行的函数。
②time {long} ：设置每隔多少毫秒执行指定的函数。单位：毫秒。

返回值：
{long} 返回一个数字。可以通过调用window.clearInterval()来取消此函数的执行。

方法详情

 long setTimeout(function fn, long time) ：在一定的毫秒数后执行指点函数。

参数：
①fn {function} ：需要执行的函数。
②time {long} ：设置多少毫秒后执行指定的函数。单位：毫秒。

返回值：
{long} 返回一个数字。可以通过调用window.clearTimeout()来取消此函数的执行。

方法详情

2.Navigator 对象

2.1 说明

Navigator 对象：包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。

调用方式：window.navigator 或者 navigator。

2.2 属性

 readonly string appName ：返回浏览器的名称。基于 Netscape 的浏览器中，返回的是 "Netscape"。在 IE 中，返回值为 "Microsoft Internet Explorer"。

 readonly string appVersion ：返回浏览器版本和平台信息。如：某个Chrome版本返回 "5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36"。

 readonly Geolocation geolocation ：返回一个Geolocation对象，可获取当前的地理信息。

 readonly string language ：返回浏览器界面语言。简体中文返回："zh-CN"。

 readonly boolean onLine ：返回浏览器是否可连接网络。

 readonly string platform ：返回浏览器所在的系统平台。如：Win32。

 readonly string userAgent ：返回由客户机发送服务器的 user-agent 头部的值。如："Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36".

 readonly ServiceWorker serviceWorker ：返回ServiceWorker对象。serviceWorker运行于浏览器后台的一种脚本，它可以无需Web页面或者用户交互就能提供额外的功能。

2.2 方法

 boolean javaEnabled() ：返回浏览器是否启用Java。

3. Screen 对象

3.1 介绍

Screen 对象：包含屏幕信息。如：获取屏幕高度、宽度等等。

调用方式：window.screen 或者 screen。

3.2 属性

 readonly long availHeight ：返回浏览器在屏幕的可用高度，单位px(像素)。可理解为浏览器最大化的高度，一般为屏幕高度减去上下系统任务栏或停靠栏。

 readonly long availWidth ：返回浏览器在屏幕的可用宽度，单位px(像素)。可理解为浏览器最大化的宽度，一般为屏幕宽度减去左右系统任务栏或停靠栏。

 readonly long colorDepth ：返回屏幕的颜色深度。颜色深度简单说就是最多支持多少种颜色,。一般是用“位”来描述的。比如BMP格式，则最多可以支持红、绿、蓝各256种，总共24位。所以颜色深度是24。

 readonly long height ：返回屏幕的高度，单位px(像素)。

 readonly long pixelDepth ：返回屏幕的色彩深度。

色彩深度计算机图形学领域表示在位图或者视频帧缓冲区中储存1像素的颜色所用的位数，它也称为位/像素（bpp）。
色彩深度越高，可用的颜色就越多。
色彩深度是用“n位颜色”（n-bit colour）来说明的。
若色彩深度是n位，即有2^n种颜色选择，而储存每像素所用的位数就是n。
比如：24位：,,216种颜色，真彩色，能提供比肉眼能识别更多的颜色，用于拍摄照片。

属性详解

 readonly long width ：返回屏幕的宽度，单位px(像素)。

4. History 对象

4.1 说明

History 对象：可对当前页的浏览历史进行操作，如：前进、后退等。但不能知道浏览了哪些URL。

调用方式：window.history 或者 history。

4.2 属性

 readonly long length ：返回浏览器历史列表中的 URL 数量。

4.3 方法

 void back() ：当前所属窗口访问上一个访问过的URL。等同于浏览器的"后退"按钮，也等同于history.go(-1)。

 void forward() ：当前所属窗口访问下一个访问过的URL。等同于浏览器的"前进"按钮，也等同于history.go(1)。

 void go(int index) ：使当前窗口访问指定的访问过的URL。当前窗口访问过的URL，是存入一个数组。正数表示前进index个(点击"前进"按钮index次)，负数表示后退index个(点击"后退"按钮index次)。

5. Location 对象

5.1 说明

Location 对象：可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。

调用方式：window.location 或者 location。

5.2 属性

 string hash ：设置或返回当前页面URL中的的锚部分，包含开头的#符号。

如：www.baidu.com#top
loction.hase; // => 返回#top 

属性详解

 string host ：设置或返回当前页面URL的主机名称和端口。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.host; // => 返回 'wenku.baidu.com:80'
location.host = 'www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com/view/abc

属性详解

 string hostname ：设置或返回当前页面URL的主机名称。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.hostname; // => 返回 'wenku.baidu.com'
location.hostname = 'www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com:80/view/abc

属性详解

 string href ：设置或返回当前页面完整的URL。若设置时不加协议，设置的字符串只是改变URL最后一个'/'之后的字符串。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.href; // => 返回 'http://wenku.baidu.com:80/view/abc'
location.href = 'www.baidu.com'; // 不加协议，会让当前窗口访问 http://wenku.baidu.com:80/view/www.baidu.com
location.href = 'http://www.baidu.com'; // 会让当前窗口访问 http://www.baidu.com

属性详解

 string pathname ：设置或返回当前页面URL的路径部分。

// 页面地址：http://wenku.baidu.com:80/view/abc
location.pathname; // => 返回 '/view/abc'
location.pathname = 'a.html'; // 修改路径的值，会让当前窗口访问 http://wenku.baidu.com:80/a.html

属性详解

 string port ：设置或返回当前页面URL的端口。若当前URL没有端口，返回一个''(空字符串)。

 string protocol ：设置或返回当前页面URL的协议，最后面会有个':'冒号。

// 页面地址：http://www.baidu.com
location.protocol; // => 返回 'http:'
location.protocol = 'https:'; // 会让当前窗口访问 https://www.baidu.com

属性详解

 string search ：设置或返回当前页面URL的查询部分(从问号 (?) 开始的 URL)。

// 页面地址：http://www.baidu.com?id=1&page=1
location.search; // => 返回 '?id=1&page=1'
location.protocol = '?id=1&page=1'; // 会让当前窗口访问 http://www.baidu.com?id=1&page=1
location.protocol = 'id=1'; // 省略'?'问好，会让当前窗口访问 http://www.baidu.com?id=1

属性详解

 readonly string origin ：返回当前页面URL的源。返回格式：协议+主机名+端口；如：https://www.baidu.com

5.3 方法

 void assign(string url) ：设置当前页面加载指定的url，等同于设置href属性的值为url。

 void reload() ：重新加载当前页面的URL。可看成为刷新操作。

 void replace(string url) ：设置当前页面加载指定的url，并在浏览器历史记录中替换掉当前地址，进行"后退"操作不会显示当前访问过的记录。

若已顺序访问过A和B页面。
在B页面，输入：location.replace('http://c.html'); // 访问C页面。
此时页面加载C页面。点击浏览器的"退回"按钮，会退回到A页面。

方法详解

End

Web开发之路系列文章

菜单加载中...