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
[TimLinux] JavaScript BOM 浏览器对象模型
来源: http://www.bubuko.com/infodetail-2706133.html