浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话.

不存在浏览器对象模型（BOM）的官方标准。现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

window 对象

Window 对象是所有客户端 JavaScript 特性和 API 的主要接入点.它表示 Web 浏览器的一个窗口或窗体,并且可以用 window 标识符来引用它.它是客户端 JavaScript 程序的全局对象. Window 对象上有许多属性和方法,但是只有一部分实际上和浏览器窗口相关.

计时器

setTimeout() 和 setInterval() 可以用来注册在指定的事件之后单次或重复调用的函数.

Window 对象的 setTimeout() 方法用来实现一个函数在指定的毫秒数之后运行. setTimeout() 返回一个值,这个值传递给 clearTimeout() 用来取消这个函数的执行.
setInterval() 和 setTimeout() 一样, 只不过这个函数会在指定毫秒数的间隔里重复调用:
```
  setInterval(updateClock, 60000); // 每 60 秒调用一次 updateClock()
```

和 setTimeout() 一样, setInterval() 也返回一个值,这个值可以传递给 clearInterval(), 用来取消后续函数的调用.

HTML5 规范 (除 IE 之外所有的浏览器) 还允许 setTimeout() 和 setInterval() 传入额外的参数,并在调用函数时把这些参数传递过去.如果需要支持 IE,就不要应用次特性.

如果以 0 毫秒的超时事件来调用 setTimeout(),那么指定的函数不会立刻执行.相反,会把它放到队列中,等到前面处于等待状态的事件处理程序执行完成后,再立即调用它.

setInterval() 延迟参数值小于10，则默认使用值为10.

浏览器定位和导航

Window 对象的 location 属性引用的是 Location 对象, 它表示该窗口中当前显示的文档的 URL,并定义了方法来使窗口载入新的文档.

解析 URL

Location 对象表示该窗口中当前显示的文档的 URL. Location对象的 href 属性是一个字符串,包含 URL 完整文本. Location 对象的 toString() 方法返回 href 属性的值,因此在会隐式调用 toString() 的情况下,可以使用 location.toString() 替代 location.href

protocol、host、hostname、port、pathname 和 search,这些属性分别表示 URL 的各个部分.

  // 假设 location.href http://127.0.0.1:5500/index.html?name=a
  
  location.protocol // 协议 返回 "http:"

  location.host // 域名+端口号 返回 "127.0.0.1:5500"

  location.hostname // 域名 返回 "127.0.0.1"

  location.port // 端口号 返回 "5500"

  location.pathname // 路径 返回 "/index.html"

  location.search // 查询字符串 返回 "?name=a"

Location 对象的 hash 和 search 属性比较有趣,如果有的话, hash 属性返回 URL 中的 “片段标识符” 部分. search 属性返回是问号及之后的 URL.一般来说,这部分内容是用来参数化 URL 并在其中嵌入参数.

通过一个自定义函数 urlArgs(),将参数从 URL 的 search 属性中提取出来.

  function urlArgs() {
    var args = {};
    var query = location.search.substring(1);
    var pairs = query.split("&");
    for (var i = 0; i < pairs.length; i++) {
      var pos = pairs[i].indexof("=");
      var name = pairs[i].substring(0,pos);
      var value = pairs[i].substring(pos+1);
      value = decodeURIComponent(value);
      args[name] = value;
    } 
    return args;
  }

载入新的文档

Location 对象的 assign() 方法可以使窗口载入并显示你指定的 URL 中的文档. replace() 方法也类似,但它在载入新文档之前会从浏览器历史中把当前文档删除.

Location 对象的 reload() 方法可以让浏览器重新载入当前文档.

更传统的页面跳转方式是通过给 location 赋值:

location = "http://www.baidu.com" 载入百度

location = "page2.html" 相对于当前 URL,载入 page2.html

location = "#top" 他不会让浏览器载入新文档,只会使它滚动到文档的某个位置(类似锚点链接).#top 标识符是个特殊的例子:如果文档中没有元素的 ID 是 “top”, 他会让浏览器跳到文档的开始处.

浏览历史

Window 对象的 history 属性引用的是该窗口的 History 对象. History 对象是用来把窗口的浏览历史用文档和和文档列表的形式表示.History 对象的 length 属性表示浏览历史表中的元素数量,但出于安全因素,脚本不能访问已保存的 URL.

History 对象的 back() 和 forward() 方法与浏览器的 “后退” 和 “前进” 按钮一样:它们使浏览器在浏览历史中向前或向后跳转一格. go() 方法接受一个整参数,可以在历史列表中向前 (正参数) 或向后 (负参数) 跳过任意多个页.

history.go(-2) 相当于单击“后退”按钮两次

Navigator 对象

Window 对象的 navigator 属性引用的是包含浏览器厂商和版本信息的 Navigator 对象.

appName 属性,表示浏览器的全称如: "Netscape".
appVersion 属性, 表示浏览器厂商和版本信息的详细字符串.
userAgent 属性, 浏览器在它的 USER-AGENT HTTP 头部中发送的字符串. 包含 appVersion 所有信息.
platform 属性, 表示运行浏览器的操作系统.

Screen 对象

Window 对象的 screen 属性引用的是 Screen 对象.它提供有关窗口屏幕显示的大小和可用的颜色数量的信息. 属性 width 和 height 指定的是以像素为单位的窗口大小.属性 availWidth 和 availHeight 指定的是实际可用的显示大小. 属性 colorDepth 指定的是显示的 BPP(bits-per-pixel) 值,典型的值有 16、24、32.

对话框

Window 对象提供了 3 个方法来向用户显示简单的对话框.

alert() 向用户显示一条消息并等待用户关闭对话框.
confirm() 也显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个布尔值.
prompt() 也显示一条消息,等待用户输入字符串,并返回那个字符串. 这些对话框中显示的文本是纯文本,而不是 HTML 格式的文本

alert() 、confirm() 和 prompt() 都会产生阻塞,如果正在载入文档,也会停止载入,知道用户用要求的输入进行响应为止.

BOM 浏览器对象模型