前端重新学习（3）浏览器对象模型 (BOM)

来源《Javascript高级程序教程》笔记

JavaScript Window - 浏览器对象模型

什么是BOM？

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性

与DOM的区别

DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
BOM的内容不多，主要还是DOM。

由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。

1、BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

2、DOM 文档对象模型

DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定

JavaScript由3部分组成：

• ECMAScript：解释器、翻译兼容性：完全兼容
• DOM：Document Object Model （文本对象）兼容性：部分不兼容
• BOM：Browser Object Model （浏览器对象）兼容性：不兼容（例如IE，谷歌，火狐，不可能兼容

 BOM三大对象

1. window 对象
2. location 对象
3. history 对象

window 对象

 

BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象处于 JavaScript 结 构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

//与此相同

document.getElementById("header");

 

Window 尺寸

 

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
• window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

其他 Window 方法

一些其他方法：

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

location对象 

location 是 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了 一些导航功能。事实上，location 对象是 window 对象的属性，也是 document 对象的属性； 所以 window.location 和 document.location 等效。

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL。

location.pathname 属性返回 URL 的路径名。

location.assign() 方法加载新的文档。

history 对象

history 对象是 window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻 算起。 

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击向前按钮相同

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的：

Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

 

window.navigator 

window.navigator 对象包含有关访问者浏览器的信息。

window.navigator 对象在编写时可不使用 window 这个前缀。

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• navigator 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

例子：if (window.opera) {...some action...}