JS（十四）BOM

一、什么是BOM？

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM 的核心是 window 对象，表示浏览器的实例。

---

二、BOM对象

• window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
• document 对象，文档对象；
• location 对象，浏览器当前URL信息；
• navigator 对象，浏览器本身信息；
• screen 对象，客户端屏幕信息；
• history 对象，浏览器访问历史信息；

 2.1、window对象

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

2.1.1窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset

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

pageYOffset

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

注意：IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

2.1.2.窗口大小

innerWidth

页面视图区的宽度

innerHeight

页面视图区的高度

outerWidth

浏览器窗口的宽度

outerHeight

浏览器窗口的高度

注意：所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

2.1.3.screen对象

屏幕总宽度/高度(像素单位):

screen.width

screen.height

可用宽度/高度(像素单位):

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

2.2、Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

window.open(URL,name,specs,replace)

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

3、系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。

alert()

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

alert('我是警告框')

confirm()

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。用户通过单击不同的按钮表明希望接下来执行什么操作。

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

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

属性

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

方法

assign()

传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace()

参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()

重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

5、history对象

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

length

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

back()

加载 history 列表中的前一个 URL

forward()

加载 history 列表中的下一个 URL

go()

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

6、间歇调用和超时调用

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

setTimeout()

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

参数：

1.要执行的代码   2.以毫秒表示的时间。

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

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

setInterval()

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

参数：

1.要执行的代码   2.以毫秒表示的时间。

如动态显示时间：

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