【读书笔记】JavaScript BOM

635 阅读5分钟

8.1 window 对象

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

  • 8.1.1 全局作用域

由于 window 对象同时扮演着 ECMAScript中 Global 对象的角色,因此所有在全局作用域中声明 的变量、函数都会变成 window 对象的属性和方法。

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
  • 8.1.2 窗口关系及框架

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

<html>
<head>
    <title>Frameset Example</title>
</head>
<frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
</frameset>
</html
  • 8.1.3 窗口位置

    • moveTo() 接收的是新位置的 x 和 y 坐标值
    • moveBy() 接收的是在水平和垂直方向上移动的像素数
    //将窗口移动到屏幕左上角
    window.moveTo(0,0);
    //将窗向下移动 100 像素
    window.moveBy(0,100);
    //将窗口移动到(200,300)
    window.moveTo(200,300);
    //将窗口向左移动 50 像素
    window.moveBy(-50,0);
    
  • 8.1.4 窗口大小

    • resizeTo() 接收浏览器窗口的新宽度和新高度
    • resizeBy() 接收新窗口与原窗口的宽度和高度之差
    //调整到 100×100
    window.resizeTo(100, 100);
    //调整到 200×150
    window.resizeBy(100, 50);
    //调整到 300×300
    window.resizeTo(300, 300);
    
  • 8.1.5 导航和打开窗口

    • 使用 window.open() 方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。
    window.open("http://www.wrox.com/", "topFrame");
    
  • 8.1.6 间歇调用和超时调用

JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。 前者是在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次代码。
超时调用需要使用 window 对象的 setTimeout() 方法,它接受两个参数:要执行的代码和以毫秒 表示的时间(即在执行代码前需要等待多少毫秒)。

//设置超时调用
var timeoutId = setTimeout(function() {
    alert("Hello world!");
}, 1000);

//注意:把它取消
clearTimeout(timeoutId);
  • 8.1.7 系统对话框

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

8.2 location 对象

location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一 些导航功能。

  • 8.2.1 查询字符串参数

location.search 返回从问号到 URL末尾的所有内容,但却没有办法逐个访问其中的每个查询字符串参数。

  • 8.2.2 位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置。首先,也是最常用的方式,就是使用 assign() 方法并为其传递一个 URL,

location.assign("http://www.wrox.com");

window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

8.3 navigator 对象

navigator成为识别客户端浏览器的事实标准。

  • 8.3.1 检测插件

检测浏览器中是否安装了特定的插件是一种最常见的检测例程。对于非 IE 浏览器,可以使用 plugins 数组来达到这个目的。该数组中的每一项都包含下列属性。

name :插件的名字。
description :插件的描述。
filename :插件的文件名。
length :插件所处理的 MIME 类型数量
  • 8.3.2 注册处理程序

8.4 screen 对象

8.5 history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);

8.6 小结

浏览器对象模型(BOM)以 window 对象为依托,表示浏览器窗口以及页面可见区域。同时, window 对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造 函数及其他函数也都存在于它的命名空间下。本章讨论了下列 BOM 的组成部分。

在使用框架时,每个框架都有自己的 window 对象以及所有原生构造函数及其他函数的副本。 每个框架都保存在 frames 集合中,可以通过位置或通过名称来访问。
有一些窗口指针,可以用来引用其他框架,包括父框架。
top 对象始终指向最外围的框架,也就是整个浏览器窗口。
parent 对象表示包含当前框架的框架,而 self 对象则回指 window 。
使用 location 对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性,可以逐段 或整体性地修改浏览器的 URL。
调用 replace() 方法可以导航到一个新 URL,同时该 URL 会替换浏览器历史记录中当前显示 的页面。
navigator 对象提供了与浏览器有关的信息。到底提供哪些信息,很大程度上取决于用户的浏 览器;不过,也有一些公共的属性(如 userAgent )存在于所有浏览器中。

BOM 中还有两个对象: screen 和 history ,但它们的功能有限。 screen 对象中保存着与客户端 显示器有关的信息,这些信息一般只用于站点分析。 history 对象为访问浏览器的历史记录开了一个 小缝隙,开发人员可以据此判断历史记录的数量,也可以在历史记录中向后或向前导航到任意页面。