[TimLinux] JavaScript BOM浏览器对象模型

1. 简介

ECMAScript是JavaScript的核心，但是如果要在WEB中使用JavaScript，那么BOM则无疑才是真的的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM没有标准，各浏览器厂商间定义的公共对象，可以作为事实上的标准存在。W3C在HTML5中把BOM纳入了规范中。

2. window对象

window对象：表示浏览器的一个实例。window的双重角色：通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

2.1. 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。与直接在window对象上定义属性和方法的区别在于删除操作：window对象上定义的可以delete，全局变量不可以被删除。

// 1. 全局变量为window对象的属性和方法
var age = 29;
function sayAge() { console.log(this.age); }

window.age; // 29
window.sayAge(); // 29

// 2. 全局变量不可删除, window对象的属性和方法可以被删除
window.color = 'red';

delete window.age;
delete window.color;

window.age; // 29， 不可删除
window.color; // undefined，可被删除

// 3. 访问全局对象未定义值会抛出异常，访问window属性不会
var newValue = oldValue; // 抛出异常
var newValue = window.oldValue; // undefined

很多全局JavaScript对象（如：location, navigator等）都是window对象的属性。

2.2. 窗口关系与框架

如果页面包含框架，每个框架有自己的window对象，并且保存在 frames 集合中（可以通过数值索引：0开始，从左到右，从上到下，或者框架名来访问window对象）。每个window对象都有一个name属性，用来包含框架名。使用框架的页面中，浏览器中会存在多个Global对象，每个框架内的变量是独立的，不同框架间的变量进行逻辑运算是没有意义的。框架相关对象：

• top对象: 始终执行最高、最外层的框架，也就是浏览器窗口。通过它可以访问另外一个框架对象，window对象指向的是当前框架自身。
• parent对象:始终指向当前框架的直接上层框架，某些情况下，parent === top。在没有框架时，parent 一定等于 top.
• self对象:始终指向window，self与window对象可以互换使用，引入的目的是与top、parent对象对应起来。

<frameset rows="160,*">
    <frame src='frame.html' name='topFrame'>
    <frameset cols="50%,50%">
        <frame src='anotherframe.htm' name='leftFrame'>
        <frame src='yetanotherframe.htm' name='rightFrame'>
    </frameset>
</frameset>

+--------------------------------------------------------------+
|    window.frames[0]                                          |
|    window.frames['topFrame']                                 |
|    top.Frames[0]                                             |
|    frames[0]                                                 |
|    frames['topFrame']                                        |
+--------------------------------------------------------------+
| window.frames[1]               | window.frames[2]            |
| window.frames['leftFrame']     | window.frames['rightFrame'] |
| top.frames[1]                  | top.frames[2]               |
| top.frames['leftFrame']        | top.frmaes['rightFrame']    |
| frames[1]                      | frames[2]                   |
| frames['leftFrame']            | frames['rightFrame']        |
+--------------------------------------------------------------+

2.3. 窗口位置

确定浏览器窗口左边、上边的位置：

var leftPos = (typeof window.screenLeft === 'number')? window.screenLeft : window.screenX;
var rightPos = (typeof window.screenTop === 'number)? window.screenTop : window.screenY;

// IE, Opera: screenLeft、screenTop保存的是从屏幕左边、上边到由window对象表示的页面可见区域的距离。

moveTo、moveBy方法可以移动浏览器，但是多数浏览器禁用了该功能。

2.4. 窗口大小

IE9+、Firefox、Safari、Opera和Chrome提供4个属性来确定浏览器窗口大小：innerWidth、innerHeight、outerWidth、outerHeight。document.documentElement.clientWidth、document.documentElement.clientHeight保存了页面viewport口的信息。

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if (typeof pageWidth !== 'number') {
    if (document.compatMode === 'CSS1Compat') {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

window.resizeTo(100, 100); // 调整到 100 x 100
window.resizeBy(100, 50); // 参数为新窗口与原窗口宽度、高度之差。调整到：100 x 50
window.resizeTo(300, 300); // 调整到 300 x 300

resizeTo、resizeBy方法可以调整浏览器窗口的大小，可能被浏览器禁用。

2.5. 导航与打开窗口

window.open(参数1, 参数2, 参数3, 参数4)
参数1：要加载的URL 
参数2：窗口目标，在哪里打开窗口，窗口名：'topFrame'， 或特殊字符名： _self, _parent, _top 或 _blank. （都需要用引号引上！）
参数3：一个特性字符串，一个逗号分隔的设置字符串，表示新窗口中使用哪些属性，属性表如下表所示。
参数4：一个表示新页面是否取代浏览器历史中当前加载页面的布尔值

var bingWindow = window.open('http://cn.bing.com', 'newBingWindow', 'height=400,width=400,top=10,left=10,resizable=yes');
bingWindow.resizeTo(500, 500);
bingWindow.moveTo(100, 100);
bingWindow.close();
console.log(bingWindow.closed); // true
bingWindow.openar === window; // true
bingWindow.openar === null; // 表示：使用单独的进程运行新标签页（_blank）

参数3属性表：

设置	值	说明
fullscreen	yes | no	仅限IE，是否最大化
height	数值	新窗口的高度，最小值 100
left	数值	新窗口的左坐标，不能为负值
location	yes | no	是否显示地址栏，默认 no
menubar	yes | no	是否显示菜单栏，默认 no
resizable	yes | no	是否可被拖动改变大小，默认 no
scrollbars	yes | no	是否允许滚动，默认 no
status	yes | no	是否显示状态栏，默认 no
toolbar	yes | no	是否显示工具栏，默认 no
top	数值	新窗口的上坐标，不能为负值
width	数值	新窗口的宽度，最小值 100

 2.6. 间接调用与超时调用

var timeoutId = setTimeout(function() {}, 1000); // 1000毫秒后执行函数
clearTimeout(timeoutId);

var intervalId = setInterval(function () {}, 1000); // 每1000毫秒执行函数一次
clearInterval(intervalId);

 

3. location对象

最有用的BOM对象之一，提供当前窗口中加载的文档有关信息、一些导航功能。window.location === document.locaiton === location都是指的同一个对象。location对象将 url 解析为不同的属性片段。

属性名	例子	说明
hash	‘#content’	url中#后跟随的零个或多个字符，不包含时，返回空字符串
host	‘www.bing.com 8080’	服务器名称和端口号
hostname	'www.bing.com'	不带端口号的服务器名称
href	'http://www.bing.com'	当前加载页面的完整URL值，location.toString也返回该值
pathname	'/user/login'	URL中的目录和（或）文件名
port	'8080'	端口号，不含端口号时，返回空字符串
protocol	'http:'	页面使用的协议
search	'?next_url=/my/index'	URL的查询字符串，以问号开头

查询字符串参数：

function getQueryStringArgs() {
    var qs = (location.search.length > 0 ? location.search.substring(1) : '');  // 去掉开头的问号
    var args = {};
    var items = qs.length ? qs.split('&') : [];

    for (var i=0; i < items.length; i++) {
        var item = items[i].split('=');
        var name = decodeURIComponent(item[0]);
        var value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        }
    }

    return args;
}

位置操作：

location.assign('http://cn.bing.com'); // 打开新URL，记录到历史
window.location = 'http://cn.bing.com'; // 会调用assign
location.href = 'http://cn.bing.com'; // 会调用assign
location.hash = '#session1'; // 跳转当前页面增加 #session1
location.search = '?q=js'; // 增加查询字段
... // 其他属性效果一样，不一一介绍。每次都将导致URL重新加载（处理hash属性）

location.replace('http://cn.bing.com'); // 跳转页面，但是后退功能禁用了。
location.reload(); // 可能从缓存加载
location.reload(true); // 从服务器加载

4. navigator对象

tbd

5. screen对象

tbd

6. history对象

tbd

7. 总结

tbd