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

Posted TimLinux

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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对象

tbd

4. navigator对象

tbd

5. screen对象

tbd

6. history对象

tbd

7. 总结

tbd




























以上是关于[TimLinux] JavaScript BOM浏览器对象模型的主要内容,如果未能解决你的问题,请参考以下文章

[TimLinux] JavaScript 中循环执行和定时执行

[TimLinux] JavaScript 获取元素节点的5种方法

[TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部

[TimLinux] JavaScript AJAX接收到的数据转换为JSON格式

[TimLinux] JavaScript position为fixed时支持水平滚动条