BOM介绍

文章目录

- 1、简介
- - 主要作用
- 2、BOM的组成
- - 2.1 窗口对象window
  - - 2.1.1 window对象特点
    - 2.1.2 window作用域
    - 2.1.3 window对象常见方法
    - - **第一类：系统对话框**
      - 第二类：控制浏览器窗口方法
      - 第三类：与定时器有关的方法

1、简介

BOM（Browser Object Model)，全称浏览器对象模型。 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象，是用于描述这种对象与对象之间层次关系的模型，==浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。==BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象（例如screen对象、history对象等）都是该对象的子对象。

BOM 是在缺乏规范的背景下发展起来的，因此既充满乐趣又问题多多。毕竟，浏览器开发商都按照自己的意愿来为它添砖加瓦。最终，浏览器实现之间共通的部分成为了事实标准，为 Web 开发提供了浏览器间互操作的基础。HTML5 规范中有一部分涵盖了 BOM 的主要内容，因为 W3C 希望将JavaScript 在浏览器中最基础的部分标准化。

主要作用

弹出新浏览器窗口的能力；
移动、关闭和更改浏览器窗口大小的能力；
可提供WEB浏览器详细信息的导航对象；
可提供浏览器载入页面详细信息的本地对象；
可提供用户屏幕分辨率详细信息的屏幕对象；
支持Cookies；

2、BOM的组成

BOM中共有五大对象

Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
Histroy：历史记录对象
Location：地址栏对象

2.1 窗口对象window

BOM 的核心是 window 窗口对象对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

2.1.1 window对象特点

window对象不需要创建可以直接使用，window.方法名();，甚至可以把window直接省略方法名();

window.alert("hello window");
//等于下面的
alert("hello window");

2.1.2 window作用域

通常node环境下的全局作用域为global，浏览器的全局作用域为window，而window对象又会被复用为ECMAScript的Global对象，所以可以通过var声明的所有全局变量和函数都会变成window对象的属性和方法。比如：

<script>
    var name = 'zhangsan';
    var sayName = function () {
    console.log(this.name); //zhangsan
    }
    console.log(name);//zhangsan
    console.log(window.name); //zhangsan
    sayName();  //zhangsan
    window.sayName(); //zhangsan
</script>

上段代码我们使用var声明全局变量和全局方法，然后使用window对象调用它们，这说明我们声明的这些变量和方法全都挂载到了window对象上去了。

需要注意的是：

如果我们使用let或者const声明方法时，该方法不会挂载到window对象上去，比如下列代码会报错：

<script>
    let name1 = '张三';
    let sayName1 = function () {
        console.log(this.name); // 张三
    }
    console.log(name1);// 张三
    console.log(window.name1); // 张三
    sayName1();  // 张三
    window.sayName1(); // 错误：window.sayName1 is not a function
</script>

细心的小伙伴应该也发现了，我们声明的全局变量可以不适用window.say的形式调用，可以省略window，因为window是全局作用域，变量或方法找不到的时候自然要去window上找，所以我们挂载到window对象上的方法或变量通常可以直接调用，而不需要window.。

2.1.3 window对象常见方法

第一类：系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

alert()方法

alert()接收一个要显示给用户的字符串。

警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。
```
<script>
    alert("你确定吗?");
</script>
```
confirm()方法

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。想知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮。
```
<script>
    var result = confirm('你确定吗?');
    if (result) {
        console.log('确定');
    }else{
        console.log('取消');
    }
</script>
```
选择确定或者取消按钮会在控制台输出结果：
prompt()方法

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。
```
<script>
    var result = prompt("你叫什么名字?");
    if (result) {
        console.log(result);
    }else{
        console.log('取消');
    }
</script>
```
往输入框输入“张三”会在控制台输出

第二类：控制浏览器窗口方法

open()方法

基本语法：window.open(URL,name,specs)

这个方法可以接收 3个参数：要加载的 URL、目标窗口、特性字符串。

参数介绍：

URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。
name：可选。指定target属性或窗口的名称。支持以下值：
1. _blank - URL加载到一个新的窗口。这是默认。
2. _parent - URL加载到父框架
3. _self - URL替换当前页面
4. _top - URL替换任何可加载的框架集
5. name - 窗口名称

specs：可选。一个逗号分隔的项目列表。支持以下值：

参数	作用
height = pixels，width = pixels	窗口的高度，宽度，最小.值为100
left = pixels，top = pixels	该窗口的左侧位置，窗口顶部的位置.仅限IE浏览器
hannelmode = yes /no /1 /0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories = yes /no /1 /0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen = yes /no /1 /0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
location = yes /no /1 /0	是否显示地址字段.默认值是yes
menubar = yes /no /1 /0	是否显示菜单栏.默认值是yes
resizable = yes /no /1 /0	是否可调整窗口大小.默认值是yes
scrollbars = yes /no /1 /0	是否显示滚动条.默认值是yes
status = yes /no /1 /0	是否要添加一个状态栏.默认值是yes
titlebar = yes /no /1 /0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar = yes /no /1 /0	是否显示浏览器工具栏.默认值是yes

close()方法

关闭浏览器窗口，谁调用就关闭谁。

例如：

<button id="closeWindow">关闭窗口</button>
<script>
	var closeWindow = document.getElementById("closeWindow");
    closeWindow.onclick = function(){
        window.close(); //关闭调用它的窗口
    }
</script>

第三类：与定时器有关的方法

间歇调用和超时调用，javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

setTimeout()

指定的时间后执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前定时器的id

<script>
    //第一个参数传入方法名，不带括号,第二个参数传入时间（单位毫秒）
    var id = setTimeout(fun,3000);
	function fun(){
		alert("hello");
	}
</script>

setInterval()

每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前间隔器的id

//间隔执行
function testSetInterval(){
     var id = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}

erval()**

每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前间隔器的id

```javascript
//间隔执行
function testSetInterval(){
     var id = window.setInterval(function(){
          alert("间隔执行");
     },2000);  
}
```