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

Posted 2020-12-26 TimLinux

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对象

tbd

4. navigator对象

tbd

5. screen对象

tbd

6. history对象

tbd

7. 总结

tbd