BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现：Window对象；Location对象；Navigator对象；Screen对象；History对象。

书摘&心得

BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现。

1 window对象

  • BOM代表浏览器对象模式，在web中使用javaScript，BOM无疑是真正的核心。
  • BOM的核心对象是window，表示浏览器的一个实例。
  • window对象既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

  • 定义全局变量与在window对象上直接定义属性存在差别：

    • 全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。

    • 尝试访问未声明变量会抛出错误，但是通过查询window对象可以知道某个可能未声明的变量是否存在。

      1.       ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2841570/1612233645963-bf5748eb-1cb2-4772-99c4-489157eb34cc.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&name=image.png&originHeight=176&originWidth=489&size=138044&status=done&style=none&width=338)

      1.1 框架frame

  • 如果页面中包含框架，则每个框架都拥有自己的window对象，并保存在frames集合中。

  • 每个window对象都有一个name属性，其中包含框架的名称
  • 可以通过window.frames[0]或者window.frames[“name”]来引用框架

  • window对象的属性

    • top对象始终指向最高层的框架，即浏览器窗口。
    • parent对象始终指向当前框架的直接上层框架。
    • self对象始终指向window

      1.1 窗口

  • 通过window.screenLeft window.screenTop或者window.screenX window.screenY可以获得窗口相对于屏幕左边和上边的位置。

  • 通过moveTo()和moveBy()可以将窗口精确移动到一个新的位置
    • 这两个方法可能会被浏览器禁用。
    • 不适用于框架，只能对最外层的window对象使用。
    • image.png
  • document.documentElement.clientWidth和document.doculmentElement.clinetHeight中保存了页面的视口信息（IE6中有所不同）
  • 跨浏览器确定窗口大小不简单，不同浏览器表现不同
  • 使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。
    • 这两个方法可能会被浏览器禁用。
    • 不适用于框架，只能对最外层的window对象使用。
    • image.png

  • 使用window.open()方法既可以导航到一个特定url，也可以打开一个新的浏览器窗口

    • 返回一个指向新窗口的引用，允许我们调整大小或移动位置。

      2 location对象

  • 提供了当前窗口中加载的文档有关的信息。

  • 既是window对象的属性，又是document对象的属性。
  • location对象的用处不只表现在保存当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可通过不同的属性访问这些片段。
    • search、query常用于路由跳转时页面间传值：
    • image.png
  • 使用Location对象可以通过很多方式改变浏览器位置。
  • 使用replace()方法用户不能回到前一个页面。

  • 使用reload()可以重新加载当前显示的页面。

    • image.png

      3 navigator对象

  • navigator对象的属性通常用于检测显示网页的浏览器类型

  • 通过navigator.plugins数组可以检测浏览器插件

    4 screen对象

  • screen对象只用来表明客户端的能力

  • 常用于测定客户端能力的站点跟踪工具中

  • 可用其中的信息来调整浏览器窗口大小

    5 history对象

  • history对象保存着用户上网的历史记录。

  • 使用go()方法可以在用户的历史记录中任意跳转。
  • 可以使用back()和forward()来代替go()
  • 可以通过history.length判断用户是否一开始就打开了你的页面。
  • 每当url改变，就会生成一条历史记录，包括Url中hash的变化。
  • 因此设置Location.hash会在浏览器中生成一条新的历史记录。