Fangjian

FE / 生活是一种态度
导航
 » 主页
 » 项目
 » Github
 » 关于我

BOM [js]

05 Apr 2016 » js

BOM的核心对象是 window ，它表示浏览器的一个实例。在浏览器中 window 既是javascript 访问浏览器的一个 接口，又是 ECMScript 规定的 Global 对象。

目录

1 BOM浏览器对象模型

2 Window

3 Navigator

4 Screen

5 History

6 Location

BOM浏览器对象模型

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信息等

一、Window

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

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

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

属性归类：

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对象

方法：

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) ：创建一个新的窗口


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) ：每隔一定的周期(毫秒)执行指定函数


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

二、Navigator

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

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

属性：

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页面或者用户交互就能提供额外的功能

方法：

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

三、Screen

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

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

属性:

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

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

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

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

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

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

四、History

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

调用方式：window.history 或者 history

属性：

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

方法：

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

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

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

五、Location

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

调用方式：window.location 或者 location

属性:

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

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

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

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

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

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

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

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

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

方法：

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

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

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

相关文章