初学JavaScript：BOM（浏览器对象模型）介绍

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>

分析：
变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果了。

2.1.3 window对象常见方法

第一类：系统对话框

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

• alert()方法
  alert()接收一个要显示给用户的字符串。
  与 console.log 可以接收任意数量的参数且能一次性打印这些参数不同，alert()只接收一个参数。调用 alert()时，传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”（确定）按钮。如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

<script>
     alert("你确定吗");
</script>

• confirm()方法
  确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。用户通过单击不同的按钮表明希望接下来执行什么操作。
  要知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。确认框的典型用法如下所示：

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

往输入框输入“hll”会在控制台输出

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

• open()方法
  基本语法：window.open(URL,name,specs,replace)
  这个方法可以接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。
  通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。
  此外，open()方法是有返回值的，返回的是打开的窗口对象。

参数介绍：

URL：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。

name：可选。指定target属性或窗口的名称。支持以下值：
_blank - URL加载到一个新的窗口。这是默认。
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

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

参数	作用
hannelmode=yes |no |1 |0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
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
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace：Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
- true，表示URL 替换浏览历史中的当前条目。
- false ，表示URL 在浏览历史中创建新的条目。

• close()方法

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

<button id="openWindow">打开窗口</button>
<button id="closeWindow">关闭窗口</button>
<script>
    var openWindow = document.getElementById("openWindow");
    var newWindow; //全局变量，对新创建的窗口进行操作
    openWindow.onclick = function(){
        newWindow = open("https://www.baidu.com"); //打开指定url的窗口
    }
        
    var closeWindow = document.getElementById("closeWindow");
    closeWindow.onclick = function(){
        newWindow.close(); //关闭调用它的窗口
    }
</script>

• resizeTo方法
  调整窗口大小，有两个参数，分别设置窗口的高度和宽度。

• moveTo方法
  移动窗口，两个参数，接收的是新位置的x和y坐标值。

整体使用例子如下：

<button onclick="openWindow()">打开新窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
<script>
  function openWindow() {
    // 设置一个全局变量接收新窗口的打开
    w = window.open('https://www.baidu.com', '_blank', 'width=600,height=600', 'false');
    // 调整窗口大小 浏览器窗口的新高度和新宽度
    w.resizeTo(400,400);
    // 移动窗体 接受的是新位置的x和y坐标值
    w.moveTo(100, 100);
  }
  function closeWindow() {
    // 关闭窗口
    w.close();
  }
</script>

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

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

• setTimeout()

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符，需要通过它来取消超时调用，通过使用clearTimeout(ID)方法来清除超时调用。

setTimeout()方法由两个参数，
1.要执行的代码
2.以毫秒表示的时间。

例如在1秒后执行输出语句

<script>
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);
  console.log(id);
  // 清除超时调用
  clearTimeout(id);

// 或者将方法声明单独抽离出来
// 第一种方式，第一个参数传入方法名，不带括号
  /*
	var id = setTimeout(fun,3000);
	function fun(){
		alert("hello");
	}
	//清除超时调用
	clearTimeout(id);
  */

// 第二种方式，第一个参数传入方法名的字符串，带括号
/*
	var id = setTimeout("fun()",3000);
	function fun(){
		alert("hello");
	}
	//清除超时调用
	clearTimeout(id);
*/
</script>

• setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用，使用clearInterval()方法清除间歇调用。

setInterval()有两个参数：
1.要执行的代码
2.以毫秒表示的时间。

例如：动态显示时间

<script>
  var div = document.createElement('div');
  // 间歇调用
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  clearInterval(id);
</script>

这两个方法请一定要记得最后使用clearTimeout()方法和clearInterval()方法清除。

2.1.4 window对象中的属性

第一类：window中的属性包括其他对象，例如
其他BOM对象

• history
• location
• navigator
• screen

其他DOM对象

• document

第二类：window窗口属性
窗口位置

• screenLeft和screenTop

这两个属性分别返回窗口相对于屏幕的X和Y坐标。
screenLeft表示浏览器左边一条边距离屏幕左边一条边的距离，screenTop表示浏览器上面一条边距离屏幕上面一条边的距离。

• screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。同样和screenLeft、screenTop一样的效果，只是个浏览器兼容性不一样。

• pageXOffset和pageYoffset

设置或返回当前页面相对于窗口显示区左上角的 X 、Y位置。

窗口大小

• innerWidth
  页面视图区的宽度

• innerHeight
  页面视图区的高度

• outerWidth
  浏览器窗口的宽度

• outerHeight
  浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。

例如：

<script>
    var h1 = window.location;
    alert(h1);
    var left = window.screenLeft;
    alert(left);
</script>

2.2 window.screen对象

screen对象下的属性：

• 屏幕总宽度/高度（像素单位）
  screen.width和screen.height

• 可用宽度/高度（像素单位）
  screen.availWidth和screen.availHeight

• 颜色深度
  screen.colorDepth

• 颜色分辨率
  screen.pixelDepth

2.3 window.location地址栏对象

location对象是最有用的BOM对象之一，也叫地址栏对象，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。
location是个神奇的对象，既是window的对象也是document的对象。经过对比发现，直接使用location对象也可以。

<script>
  console.log(window.location === document.location); //true
  console.log(location === document.location);	//true
  console.log(location === window.location);	//true
</script>

2.3.1 location对象中的属性

• host
  返回服务器名称和端口号
• hostname
  返回不带端口号的服务器名称
• href
  返回当前加载页面的完整URL
• pathname
  返回URL的目录和文件名
• port
  返回URL中指定的端口号
• protocol
  返回页面使用的协议
• search
  返回URL的查询字符串。这个字符串以问号开头

2.3.2 location对象中的方法

• assign()
  传递一个url参数，打开新url，替换当前页面，并在浏览记录中生成一条记录，页面替换后可以返回上一个页面。
• replace()
  参数为一个url，打开新url，替换当前页面，不会在历史记录中生成新记录，替换页面后无法再次返回之前页面。
• reload()
  重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
<script>
  var btn = document.getElementsByTagName('button');//返回值为一个类数组
  btn[0].onclick = function () {
    location.assign('./test2.html')
  }
  btn[1].onclick = function () {
    location.replace('./test2.html')
  }
  btn[2].onclick = function () {
    location.reload()
  }
</script>

2.4 window.history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

• length

返回历史列表中的网址数
注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

• back()

加载 history 列表中的前一个 URL

• forward()

加载 history 列表中的下一个 URL

• go()

加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

2.5 window.navigator浏览器对象

表示浏览器的信息。

window.navigator 对象可以不带 window 前缀。常用的属性：

navigator.appName：浏览器名称；注意：“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
navigator.appVersion：浏览器版本；
navigator.appCodeName：返回浏览器的应用程序代码名称
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。
navigator.cookieEnabled： 返回 true，如果 cookie 已启用，否则返回 false。
navigator.product：返回浏览器引擎的产品名称
navigator.platform：返回浏览器平台（操作系统）
navigator.onLine： 属性返回 true，假如浏览器在线
navigator.javaEnabled()：方法返回 true，如果 Java 已启用cle/details/108324161