BOM介绍

1、简介

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

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

主要作用

1. 弹出新浏览器窗口的能力；
2. 移动、关闭和更改浏览器窗口大小的能力；
3. 可提供WEB浏览器详细信息的导航对象；
4. 可提供浏览器载入页面详细信息的本地对象；
5. 可提供用户屏幕分辨率详细信息的屏幕对象；
6. 支持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);  
}
```