BOM(Browser Object Model)

BOM

ECMAScript 是JavaScript的核心,但在 Web 中使用 JavaScript,BOM(浏览器对象模型)才是真正的核心。BOM 提供了很多对象用于访问浏览器的功能。

window 对象

window 表示浏览器的一个实例。在浏览器中,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。

  1. 全局作用域
    由于 window 对象同时扮演着 ECMAScript 中的 Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。但是定义全局变量与在 window 对象上直接定义属性有一点差别:全局变量不能通过 delete 操作符删除,而直接在 window 对象上定义的属性可以
  2. 窗口关系及框架
    (1) 如果页面中包含框架,则每个框架都拥有自己的 window 对象,并且保留在 frames 集合中。 (2) top 对象始终指向最高(最外)层的框架,也就是浏览器窗口。使用它可以确保在一个框架中正确访问另一个框架
    (3) 与 top 相对的另一个 window 对象是 parent。parent(父)对象始终指向当前框架的直接上层框架。在某些情况下,parent 有可能等于 top;但在没有框架的情况下,parent 一定等于 top(此时它们都等于 window)
    (4) 除非最高层窗口是通过 window.open() 打开的,否则其 window 对象的 name 属性不会包含任何值
    (5) self 对象始终指向 window;实际上,self 和 window 对象可以互换使用
    (6) 在使用框架的情况下,浏览器中会存在多个 GLobal 对象。在每个框架中定义的全局变量会自动成为框架中 window 对象的属性。由于每个 window 对象都包含原生类型的构造函数,因此每个框架都有一套自己的构造函数,这些构造函数一一对应,但并不相等。
  3. 窗口位置
    跨浏览器取得窗口左边和上边的位置
    var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
    var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
  4. 窗口大小属性: innerWidth、 innerHeight、 outerWidth、 outerHeight
  5. 导航和打开窗口
    (1)window.open() 方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口,这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
  6. 间歇调用和超时调用
    (1)超时调用 setTimeout() 方法,在指定的时间过后执行代码。接收两个参数:要执行的代码(eval()中的字符串或者函数,不推荐字符串,损失性能)和以毫秒表示的时间(即在执行代码前需要等待多少毫秒) 。但经过指定时间后的代码不一定会执行,因为JavaScript是一个单线程序的解释器,一定时间只能执行一段代码。第二个参数只是告诉JavaScript再经过多长时间把当前任务添加到队列中。该方法会返回一个数值ID,表示超时调用。这个ID是计划执行代码的唯一标识符,可以通过它来取消超时调用: clearTimeout(ID)
    (2)间歇调用 setInterval() 方法,按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。接收的参数、清除方式和超时调用相同。
  7. 系统对话框
    (1) alert(), 显示一个系统对话框,包含指定的文本和一个OK按钮
    (2) confirm(), 确认对话框,和alert()相比多了一个Cancel按钮,用户点击 OK 会返回 true,点击 Cancel 会返回 false
    (3) prompt(), 是一个“提示框”,用于提示用户输入一些文本。用户点击了OK 返回文本输入域的值,点击Cancel或者其他方式关闭返回null

location 对象

location 对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。它既是 window 对象的属性,也是 document 对象的属性。换句话说,window.location 和 document.location 引用的是同一个对象
hash: 返回URL中的hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串
host: 返回服务器名称和端口号(如果有)
hostname: 返回不带端口号的服务器名称
href: 返回当前加载页面的完整URL。而 location 对象的 toString() 方法也返回这个值
pathname: 返回URL中的目录和(或)文件名
port: 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串
protlcol: 返回页面使用的协议。通常是http: 或 https:
search: 返回URL的查询字符串。这个字符串以问号开头

  1. 查询字符串参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    function getQueryStringArgs() {

    // 取得查询字符串并且去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ''),

    // 保存数据的对象
    args = {},

    // 取得每一项
    items = qs.length ? qs.split("&") : [],
    item = null,
    name = null,
    value = null,

    // 在 for 循环中使用
    i = 0,
    len = items.length;

    // 逐个将每一项添加到 arg 对象中
    for (i = 0; i < len; i++) {
    item = items[i].split("=");
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);

    if (name.length) {
    args[name] = value;
    }
    }
    return args;
    }
  2. 位置操作
    使用 location 对象可以通过很多方式改变浏览器的位置
    location.assign('url'): 立即打开新URL并在浏览器的历史记录中生成一条记录
    window.location = xxx location.href = xxx: 与显示调用 assign() 方法效果完全一样
    修改 location 对象的 hash、search、hostname、pathname和 port 属性也可以改变 URL,每次修改 location 的属性(hash除外),页面都会以新 URL 重新加载
    通过上述任何一种方式修改 URL 之后,浏览器的历史记录中会生成一条新记录,因此用户通过单击“后退”按钮,要禁用这种行为,可以使用 replace(url) 方法
    reload() 方法重新加载当前显示的页面,不传参数可能从浏览器缓存中重新加载,传 true 强制从服务器重新加载,位于该方法调用之后的代码可能会也可能不会执行,取决于网路延迟或系统资源等,因此最好将 reload() 放最后一行

  1. navigator 对象的属性通常用于检测显示网页的浏览器类型
  2. 对于非 IE 浏览器,可以使用 navigator.plugins 来检测, IE 中检测插件的唯一方式是使用专有的 ActiveXObject 类型
  3. registerContentHandler() 和 registerProtocolHandler() 方法可以让一个站点指明它可以处理特定类型的信息

screen 对象

  1. screen 对象包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen 对象都包含着各个不相同的属性。这些信息经常集中出现在测定客户端能力的站点跟踪工具中。

history 对象

  1. history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。history 是 window 对象的属性,因此每个浏览器窗口、每个标签乃至每个框架,都有自己的 history 对象与特定的对象关联。
  2. 使用 go() 方法可以在用户的历史记录中任意跳转,可以向后也可以向前。传一个负整数值表示向后跳转几页,传一个正整数值表示向前跳转几页,传一个字符串表示跳转到历史记录中包含该字符串的第一个位置—-可能后退,也可能前进,具体看哪个位置最近
  3. back() 和 forward() 可以代替 go(),表示后退和前进一页,模仿浏览器的 “后退” 和 “前进” 按钮
  4. hostory 对象的 length 属性,保存着历史记录的数量。这个数量包括所有历史记录,即所有向前和向后的记录。对于加载到窗口、标签页或框架中的第一个页面而言,history.length 等于0