资讯专栏INFORMATION COLUMN

BOM知识简易总结

notebin / 1865人阅读

摘要:知识总结在中使用,浏览器对象模型是其核心对象的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为顶层对象。如果中不包含端口号,则这个属性返回空字符串返回页面使用的协议。

BOM知识总结

在web中使用JavaScript,BOM(浏览器对象模型)是其核心

window对象

JavaScript的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“顶层对象”。
这就是说,JavaScript的所有对象,都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”,在浏览器环境中,这个顶层对象就是window对象。

全局作用域

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

全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。

窗口的大小和位置 位置

IE、Safari、Opera、Chrome都提供了 screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息(Safari和Chrome也同样支持)。

大小

window.innerHeight和window.innerWidth
返回网页在当前窗口中可见部分的高度和宽度,即“视口”(viewport),单位为像素。当用户放大网页的时候(比如将网页从100%的大小放大为200%),这两个属性会变小。因为这时网页的像素大小不变,只是每个像素占据的屏幕空间变大了,因为可见部分(视口)就变小了。注意,这两个属性值包括滚动条的高度和宽度。

window.outerHeight和window.outerWidth
返回浏览器窗口的高度和宽度,包括浏览器菜单和边框,单位为像素。

计时器

JS是单线程语言,但它允许通过设置超时值和间歇时间来调度代码在特定的时刻执行。

setInterval

window对象的setInterval方法用来实现一个函数在指定毫秒数的间隔里重复调用。setInterval返回一个值,这个值可以传递给clearInterval用于取消这个函数的执行。

var num = 0,
    max = 10,
    intervalId;
function incrementNumber() {
    num ++;
    if (num == max){
        clearInterval(intervalId);
        alert("ok");
    }
}
intervalId = setInterval(incrementNumber,500);
setTimeout

window对象的setTimeout方法用来实现一个函数在指定的毫秒数之后运行。setTimeout返回一个值,这个值可以传递给clearTimeout用于取消这个函数的执行。

var num = 0,
    max = 10;
function incrementNumber() {
    num ++;
    if (num < max){
        setTimeout(incrementNumber,500);
    } else {
        alert("ok");
    }
}
setTimeout(incrementNumber,500);

如果以0毫秒的超时时间来调用setTimeout ( ) ,那么指定的函数不会立即执行。相反,会把它放到队列中,等到前面处于等待状态的事件处理程序全部执行完毕后,再“立即”调用它。

frame

window.frames属性返回一个类似数组的对象,成员为页面内所有框架窗口,包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口,window.frames["someName"]则是根据框架窗口的name属性的值(不是id属性),返回该窗口。

传统的frame已被废弃,由