JS——浏览器对象模型BOM

什么是BOM

BOM是browser object model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是Netscape浏览器标准的一部分 

BOM教程中，同学们将学到与浏览器窗口交互的一些对象，例如可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

下面介绍浏览器的三个公共对象：window对象，location对象，history对象。

BOM(BrowserObjectModel)也叫浏览器对象模型，描述与浏览器进行交互的方法和接口。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

JavaScript由三部分组成：ECMAScript,BOM，DOM。BOM提供了很多对象，用于访问浏览器的功能。下面介绍浏览器的三个公共对象：window对象，location对象，history对象。

---

一、window对象

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

1.对象的属性和方法
window对象有一系列的属性，这些属性本身也是对象。

BOM(BrowserObjectModel)也叫浏览器对象模型，描述与浏览器进行交互的方法和接口。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

JavaScript由三部分组成：ECMAScript,BOM，DOM。BOM提供了很多对象，用于访问浏览器的功能。下面介绍浏览器的三个公共对象：window对象，location对象，history对象。

---

一、window对象

属性	描述
closed	当前窗口的关闭打开状态
status	窗口状态栏的文本内容
defaultStatus	窗口状态栏中的默认文本
innerheight/innerwidth	文档显示区的高度和宽度
length	窗口中的框架数量
name	设置或返回窗口的名称
opener	返回对创建此窗口的窗口的引用
outerheight/outerwidth	返回窗口的外部高度和宽度
pageXOffset/pageYOffset	当前页面相对于窗口显示区左上角的 X和Y位置
parent	返回父窗口
top	如果当前窗口是框架，top是框架的顶级窗口Window对象引用；嵌套框架中top不是parent
self
screenLeft/screenTop/screenX/screenY	声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。

---

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

1.对象的属性和方法
window对象有一系列的属性，这些属性本身也是对象。

window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和alert()是一个意思。

---

2.系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。系统对话框与浏览器中显示的网页没有关系，也不包含HTML。

（1）弹出警告
alert(‘Lee’);//直接弹出警告

（2）确认和取消
confirm(‘请确定或者取消’);//这里按哪个都无效
if(confirm(‘请确定或者取消’))

{
//confirm本身有返回值
alert(‘您按了确定！’);//按确定返回true
}
else
{
alert(‘您按了取消！’);//按取消返回false
}

（3）输入提示框
var num=prompt(‘请输入一个数字’,0);//两个参数，一个提示，一个值
alert(num);//返回值可以得到

---

3、新建窗口

使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：

1.要加载的URL；
2.窗口的名称或窗口目标；
3.一个特性字符串；
4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值

open(‘http://www.baidu.com‘);//新建页面并打开百度
open(‘http://www.baidu.com‘,’baidu’);//新建页面并命名窗口并打开百度
open(‘http://www.baidu.com‘,’_parent’);//在本页窗口打开百度,_blank是新建

---

二、location对象

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

alert(location);//获取当前的URL

---

三、history对象

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

（1）跳转到前一个URL

function back(){//跳转到前一个URL
history.back();
}

（2）跳转到下一个

function forward(){//跳转到下一个URL
history.forward();
}

（3）跳转指定历史记录的URL

function go(num){//跳转指定历史记录的URL
history.go(num);
}

PS：可以通过判断history.length==0，得到是否有历史记录

总结：

JavaScript的BOM弹出新浏览器窗口的能力；移动、关闭和更改浏览器窗口大小的能力；可提供WEB浏览器详细信息的导航对象；可提供浏览器载入页面详细信息的本地对象。总之：BOM提供了可以与浏览器窗口进行互动的对象结构，增加了用户体验度。