JavaScript Browser BOM

初发布于 02 Jan 2016 | in JavaScript

Browser Object Model, 浏览器对象模型使得JS可以与浏览器对话。

Window object

所有浏览器都支持窗口对象。全局变量是 window 对象的属性，而全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 对象也是窗口对象的属性，可以由 window.document 来获取。

Window Size

window.innerHeight 和 window.innerWidth 这两个属性可用来测量浏览器窗口的尺寸（以 pixel 为单位）。

浏览器窗口（browser viewport）不包括工具条和滚动条.

常用的窗口方法：

  • window.open(strUrl, strWindowName, [strWindowFeatures])，打开一个新窗口
  • window.close()，关闭当前窗口
  • window.moveTo()，移动当前窗口
  • window.resizeTo()，重新缩放当前窗口

在新 tab 中打开 URL

let windowObjectReference = window.open("https://www.baidu.com/", "_blank");

Window Screen

window.screen 对象包含了用户设备屏幕的信息。该对象可以缺省 window 前缀。

常见属性有：

  • screen.width，以 pixel 为单位，返回用户屏幕的宽度
  • screen.height，以 pixel 为单位，返回用户屏幕的高度
  • screen.availWidth，以 pixel 为单位，返回用户屏幕减去特性接口（比如窗口任务栏）的有效可用的宽度
  • screen.availHeight，以 pixel 为单位，返回用户屏幕减去特性接口（比如窗口任务栏）的有效可用的高度度
  • screen.colorDepth，返回屏幕用于显示一种颜色所需要的 bits 个数。所有现代电脑使用 24bits 或 32bits 的硬件用于颜色 resolution
  • screen.pixelDepth，返回屏幕 pixel depth，对于现代电脑，color depth 等于 pixel depth。

Window Location

window.location 对象用来对页面 URL 进行操作。该对象可以缺省 window 前缀。

常用属性和方法：

  • location.href，返回当前页面的 URL
  • location.hostname，返回网络主机的域名（www.w3schools.com）
  • location.pathname，返回当前页面的路径和文件名（/js/js_window_location.asp）
  • location.protocol，返回使用的 web 协议 （http:// or https://）
  • location.assign(url)，该方法加载一个新文档

Window History

window.history 对象包含浏览器的历史纪录。该对象可以缺省 window 前缀。

为了保护用户隐私，对于 JS 如何获取该对象有一些限制。

常用的方法有：

  • history.back()，加载历史纪录列表中前一个 previous URL，与点击浏览器工具条里的 back 按钮效果一样
  • history.forward()，加载历史纪录列表中后一个 next URL，与点击浏览器工具条里的 forward 按钮效果一样

Window Navigator

window.navigator 对象包含用户浏览器信息。该对象可以缺省 window 前缀。

常用属性：

  • navigator.appName 和 navigator.appCodeName 返回浏览器的名字。
  • navigator.product，返回浏览器引擎的名字，如 Mac OS 上的 Chrome 和 Safari 都是 Gecko
  • navigator.appVersion 和 navigator.userAgent 都返回浏览器的版本信息，包含操作系统信息，几乎一样。区别是，后者是浏览器用来向服务器发送消息的 user-agent header。
  • navigator.platform，返回浏览器所在的操作系统。如，当前使用的电脑为 MacIntel
  • navigator.language，返回浏览器的语言，当前是 zh-CN
  • navigator.cookieEnabled，如果 cookie 是允许的，返回 true

注意：

  1. IE11, Chrome, Firefox, and Safari return appName “Netscape”. Chrome, Firefox, IE, Safari, and Opera all return appCodeName “Mozilla”.
  2. 最好不要使用从 navigator 对象里获取的浏览器版本信息。因为：不同浏览器可以使用相同的名字，导航器数据可以被浏览器主人修改，一些浏览器错误身份验证为了越过网站测试，浏览器不能报告比它晚发行的新操作系统。

Popup Boxes

JS 有三种弹出框：Alert box，Confirm box，Prompt box

  • window.alert(text)，通常用在你想要确认来自用户的信息，用户不得不点击“OK”进入下一步
  • window.confirm(text)，用在当你想要用户去检查或者接受什么，用户必须点击“OK”，或者“Cancel”以进入下一步。该方法有返回值。当用户点击“OK”时，返回 true。
  • window.prompt(text, defaultText)，用在当你想要用户在进入页面之前输入一个值。用户在输入一个值之后，必须点击“OK”，或者“Cancel”以进入下一步。该方法也有返回值。当用户点击“OK”时，返回他 输入的值 ，而当点击“Cancel”时，返回 null。

Bonus: 如果想在 popup box 里显示换行，使用 \n。

Timing Events

窗口对象允许在特定的时间间隔里执行代码。主要的方法是：

  • window.setTimeout(function[, delay, param1, param2, ...])，在等待指定毫秒数的时间后执行一个函数，返回值是一个正整数的 timeoutID。额外的 parameters 将被传给前面指定的 function。
  • window.setInterval(function, milliseconds)，在给定的时间间隔里，重复执行指定的函数。比如每个 1000 毫秒执行一次日期显示时间函数，看起来就像是一个数字时钟。
  • window.clearTimeout(timeoutID)，该方法用来停止使用 setTimeout() 要执行的函数。
  • window.clearInterval(timerVariable)，该方法用来停止使用 setInterval() 在执行的函数。使用从 setInterval() 函数返回的变量。

事件节流 Throttling

一些事件如 mousemove、resize、scroll 是连续的更新，浏览器会尽快触发更新。有时只想要在用户停止连续操作时才更新页面，当你有大量code要响应事件时尤其重要。

事件节流/函数防抖，即对于一系列更新事件只响应一次。使用 generator function 形成闭包可以实现：

// Debounce：throttle-then-act
function throttleEvents(listener, delay) {
    let timeout = null;
    return function() {
        // 2.如果已经有timer则清除并停止执行
        if (timeout) clearTimeout(timeout);
        // 3.设置新的timer，且在倒计时结束时执行真正的事件处理函数
        timeout = setTimeout(listener, delay);
    }
}
// 1.事件发生时设置一个timer，创建延迟
element.addEventListener(eventType, throttleEvents(realListenerFunction, 500))

// Throttling：act-then-throttle
function actThenThrottleEvents(listener, delay) {
  let timeout = null;
  return function() {
    if (!timeout) { // no timer running
      listener.apply(this, arguments) // run the function，传递上下文和参数
      timeout = setTimeout( function() { timeout = null },
        delay); // start a timer that turns itself off when it's done
    }
    //else, do nothing (we're in a throttling stage)
  }
}

JS Cookies

参看后面 All About Cookies 一文。